Why isn't my custom HTML code displaying correctly in Turbo 7.1.1 theme?

[fadi3]

hey every body i'm using turbo 7.1.1 theme and whem i past a snippet code in the custom html field i dont get the same result as running in the normal browser. As  you can see in the screen shot the video is not covering all the page. i want it to cover all the page for the both sides left and right  html and css  code  below the percture

HTML

<div class="section__hero-banner__cta" data-v-350508ea>
<div class="section__hero-banner__cta__text" data-v-350508ea>
<div class="section__hero-banner__cta__text__line1" data-v-350508ea>
The Original
</div> <div class="section__hero-banner__cta__text__line2" data-v-350508ea>
Portable Blender
</div>
</div> <a href="products/blendjet-2.html" data-v-350508ea><div role="button" class="section__hero-banner__cta__button" data-v-350508ea>
Get Yours Today
</div></a>
</div> <div class="section__hero-banner__media" data-v-350508ea><div class="section__hero-banner__media__desktop" data-v-350508ea>

<video autoplay="autoplay" loop="loop" muted="muted" webkit-playsinline="" playsinline="" poster='https://cdn.shopify.com/s/files/1/0655/1719/1384/files/blender_home.jpg?v=1659886276"' class="section__hero" data-v-350508ea="" __idm_id__="5513217"><source src="https://cdn.shopify.com/videos/c/o/v/c2321210a22045eab71df91bbdb16d75.mp4" type="video/mp4" data-v-350508ea=""></source></video>
</div></div>

----------------------------------------------

CSS

.section__hero{min-height:60vw;width:100%;display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}

.blendjet-demo__buy-now__button[data-v-6c29eed6]{border-radius:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:1.75px;line-height:14px;padding-left:2rem;padding-right:2rem;font-family:Bold;text-transform:uppercase;cursor:pointer;background-color:#fff;color:#373975;border:none;width:300px}.blendjet-demo__buy-now__button[data-v-6c29eed6]:hover{opacity:.7;transition:.5s ease}.blendjet-demo__buy-now__button[data-v-6c29eed6]:focus{outline:none}

.section__hero-banner__cta[data-v-350508ea]
{position:absolute;width:100%;margin:0 auto;top:47%;left:50%;transform:translate(-50%,-50%);
display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;z-index:100}
.section__hero-banner__cta__text[data-v-350508ea]{color:#fff;text-align:center;text-shadow:0 0 10px #7a7a7a}
.section__hero-banner__cta__text__line1[data-v-350508ea]{font-family:Medium;font-size:54px;
line-height:1;letter-spacing:10px;margin-bottom:10px}

.section__hero-banner__cta__text__line1[data-v-350508ea]{font-size:28px;line-height:1.14;letter-spacing:3.5px}

.section__hero-banner__cta__text__line2[data-v-350508ea]{font-family:BoldItalic;
font-size:54px;line-height:1;letter-spacing:10px;margin-bottom:21px}

.section__hero-banner__cta__text__line2[data-v-350508ea]{font-size:28px;line-height:1.14;letter-spacing:3.5px}

.section__hero-banner__cta__button[data-v-350508ea]{border-radius:40px;display:flex;align-items:center;
justify-content:center;font-size:12px;letter-spacing:1.75px;line-height:14px;padding-left:2rem;
padding-right:2rem;font-family:Bold;text-transform:uppercase;cursor:pointer;background-color:#fff
;color:#373975;border:none;height:40px;width:240px;box-shadow:0 0 10px #7a7a7a}

.section__hero-banner__cta__button[data-v-350508ea]:hover{opacity:.7;transition:.5s ease}
.section__hero-banner__cta__button[data-v-350508ea]:focus{outline:none}