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

[Megan_Dare]

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]

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]

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.

[lulaswimlabel]

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