custom liquid full width problem

custom liquid full width problem

learningdesign
Shopify Partner
201 1 22

I have add the below code in custom liquid for video bit its not full widt how to solve this issue please

website link :   getlitledlighting .com

video added below in thr page just above footer 

<!-- Add this code in the Custom Liquid section -->
<div class="video-container">
<iframe
loading="lazy"
src="https://www.youtube.com/embed/9THQE3NPUhg?autoplay=1&controls=0&showinfo=0&rel=0&modestbranding=1&lo..."
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>

<style>
.video-container {
position: relative;
width: 100%; /* Full width */
height: 100vh; /* 60% of the viewport height */
overflow: hidden;
background: #000; /* Optional: Adds a black background */
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
pointer-events: none; /* Prevent mouse events on iframe */
}
</style>

Replies 0 (0)