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

Technical Q&A

Topic summary

A user encountered an issue where adding a custom liquid video section to their Shopify store (Ride theme v12.0.0) caused all sections below it to disappear or become hidden, preventing page scrolling past the video.

Problem identified:
The custom liquid code contained a malformed HTML iframe element missing a closing “>” bracket at the end of the opening <iframe> tag.

Solution provided:
A helper identified the syntax error by reviewing the code and provided a corrected version with the proper closing bracket on the iframe element.

Resolution:
After implementing the code fix, the issue was resolved. The video section now displays correctly without hiding content below it, and normal page scrolling functionality was restored.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

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>
2

Hi @gopnik

Please try to update your code and check again


    <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>
3

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

4

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

5

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

6

I found the issue.

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

Please update the code and check again.

Screenshot_10.jpg
Screenshot_10.jpg1030×434 21.6 KB


    <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>
1 Like
7

Life saver! Thank you!

1 Like
8

Glad I could help :wink: