Solved

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

gopnik
Tourist
4 0 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>
Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7066 1335 1358

This is an accepted solution.

I found the issue. 

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

Please update the code and check again.

Screenshot_10.jpg

 

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

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 7 (7)

Dan-From-Ryviu
Shopify Partner
7066 1335 1358

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>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

gopnik
Tourist
4 0 1

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
Shopify Partner
7066 1335 1358

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

gopnik
Tourist
4 0 1

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
Shopify Partner
7066 1335 1358

This is an accepted solution.

I found the issue. 

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

Please update the code and check again.

Screenshot_10.jpg

 

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

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

gopnik
Tourist
4 0 1

Life saver! Thank you!

Dan-From-Ryviu
Shopify Partner
7066 1335 1358

Glad I could help 😉

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now