Youtube video does not fit responsive pages

[peteuga]

Hello,
I am trying to place how-to videos on my website. The videos look normal on desktop but when viewed in mobile they do not fit the page, they are too wide. Thus messing up the responsive page.

Page Text Fields
Text 3: using Insert / Media / Embed, I place the following code:

Code: Select all

<iframe title="YouTube video player" src="https://www.youtube.com/embed/GpMoczZ1BRc" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

How do I make the video fit both desktop and mobile?

[cyoung]

Youtube gives the user code that has hard-coded dimensions.
You can Google search for something like:
'how to make an embedded youtube video responsive' which should provide lots of
results, for example:

https://dev.to/deammer/embed-responsive-youtube-videos-in-2021-5dkh

If you are using a newer ShopSite theme (any theme with a bootstrap framework) you could place a div around the iframe and that would make it responsive. Something like the following...

<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

[peteuga]

I was able to solve the problem by changing the width to 100%. See the example below.

Code: Select all

<iframe title="YouTube video player" src="//www.youtube.com/embed/i9HKY19n308?rel=0" style="width: 100%; max-width: 560px; aspect-ratio: 16/9" frameborder="0" allowfullscreen="allowfullscreen"></iframe>