When I add a custom liquid video, it hides all website sections below it

[gopnik]

Whenever I go to add a custom liquid section to my site and drag it to the spot on my website that I want it, once I click save, it will then delete/hide the other website sections below it. The page won't scroll down past the video. Can anyone review my code or point to what might be causing this? My store details are below:

Site: defisupps.com

Theme: Ride (v. 12.0.0)

Custom Liquid:

<style>
.youtube-container {
	overflow: hidden;
	width: 90%;
    margin: 0 auto;
	aspect-ratio: 16/9;
	pointer-events: none;
}
.youtube-container 	iframe {
    width: 300%;
    height: 100%;
    margin-left: -100%;
}
@media screen and (max-width: 800px) {
    .youtube-container {
	    width: 90%;
    }
}
</style>
<div class='youtube-container'>
    <iframe width="560" height="315" src='https://www.youtube.com/embed/JWeKkRSZtBE?controls=0&showinfo=0&playsinline=1&autoplay=1&mute=1&loop=1&playlist=JWeKkRSZtBE'</iframe>
</div>

[Dan-From-Ryviu]

Hi @gopnik

Please try to update your code and check again 

<style>
#custom-yt {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    aspect-ratio: 16/9;
    pointer-events: none;
}
#custom-yt iframe {
    width: 300%;
    height: 100%;
    margin-left: -100%;
}
@media screen and (max-width: 800px) {
    #custom-yt {
        width: 90%;
    }
}
</style>
<div class='youtube-container' id="custom-yt">
    <iframe width="560" height="315" src='https://www.youtube.com/embed/JWeKkRSZtBE?controls=0&showinfo=0&playsinline=1&autoplay=1&mute=1&loop=1&playlist=JWeKkRSZtBE'</iframe>
</div>

[gopnik]

Hi Dan,

I tried your code but I'm still having issues. Here is a preview of the problem:
https://1kh4dgyuxx8ygvnf-67338567962.shopifypreview.com

If you compare the original site (defisupps.com) to the preview, you'll see there should be featured products and more info below the video placement.

Thanks

[Dan-From-Ryviu]

Could you show me where did you add video section? Also, only "Let customers speak for us" is missing. 

[gopnik]

I'm trying to add it after the first section and right above the featured product section--so between sections 1 & 2. Try this preview: https://1kh4dgyuxx8ygvnf-67338567962.shopifypreview.com

[Dan-From-Ryviu · Accepted solution]

I found the issue. 

Your code is missing ">" at the end of <iframe element. 

Please update the code and check again.

<style>
#custom-yt {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    aspect-ratio: 16/9;
    pointer-events: none;
}
#custom-yt iframe {
    width: 300%;
    height: 100%;
    margin-left: -100%;
}
@media screen and (max-width: 800px) {
    #custom-yt {
        width: 90%;
    }
}
</style>
<div class='youtube-container' id="custom-yt">
    <iframe width="560" height="315" src='https://www.youtube.com/embed/JWeKkRSZtBE?controls=0&showinfo=0&playsinline=1&autoplay=1&mute=1&loop=1&playlist=JWeKkRSZtBE'></iframe>
</div>

[gopnik]

Life saver! Thank you!

[Dan-From-Ryviu]

Glad I could help 😉