Youtube video does not fit responsive pages

General ShopSite user discussion

Youtube video does not fit responsive pages

Postby peteuga » Mon Jul 01, 2024 8:46 am

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?
peteuga
 
Posts: 75
Joined: Thu May 21, 2009 1:20 pm

Re: Youtube video does not fit responsive pages

Postby cyoung » Wed Jul 03, 2024 3:02 pm

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>
cyoung
 
Posts: 141
Joined: Wed Nov 09, 2016 11:01 am

Re: Youtube video does not fit responsive pages SOLVED

Postby peteuga » Thu Jul 25, 2024 4:59 am

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>
peteuga
 
Posts: 75
Joined: Thu May 21, 2009 1:20 pm


Return to User Forum

Who is online

Users browsing this forum: Bing [Bot] and 3 guests