Trying to get embedded YouTube videos to be responsive in Solo Theme

Megan_Dare
New Member
1 0 1

Hi, I'm using the Solo Theme and have a video embedded from Youtube on a page that is NOT a product page.

The issue is that the video doesn't resize on mobile, so it's far wider than the screen and gets cut in half.

It's the video half-way down this page: https://www.safenightnet.com/pages/how-it-works.

Anyone know how to fix this?

Many thanks.

PS: Please don't contact me via my website if you are trying to sell me something. Thanks! 

Brandon22
Shopify Staff
Shopify Staff
207 0 16

Hello Megan, Brandon here from the Shopify Guru Team :)

To embed a video and make it responsive I would recommend using the http://embedresponsively.com/ website. This will help give you the code for the embed that will make the video responsive.

Hope that helps :)

You can always reach out to us on phone/email/chat as well!

JoesIdeas
Shopify Expert
1195 106 290

For anyone landing here searching for the code, hello nice to meet you 👋

 

Also, here are the code snippets I use for responsive video embedding:

 

CSS (add this to your custom.scss.liquid or whichever stylesheet you add your custom CSS)

/* -- Responsive video embed -- */
.responsive-video {
    padding-bottom: 56.25%; /* for 16:9 ratio */
    padding-top: 25px;
    position: relative;
    height: 0;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="responsive-video">
  <iframe width="560" height="315" src="YOUTUBE VIDEO LINK" frameborder="0" allowfullscreen></iframe>
</div>

 

*This is also flexible to work with other videos, including Vimeo.

 

If you want to see examples or info about lazy loading, I included the details in my blog post How to Embed YouTube Videos in Shopify.

 

 

 

 

 

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
lulaswimlabel
New Member
1 0 0

Hey team. Can someone please tell me where we need to copy and paste the HTML code exactly? Thank you

 

 

 

 

 

 

0 Likes