Dawn Theme: Embedded iframe too wide on Mobile on blog posts

Store Design
1

I just went live with the Dawn theme. I’m seeing that our embedded iframes from our blogs are too wide.

Here is an example of the code I am using for the iframe (this is the default embedded code that shows up from YouTube).


<iframe width="560" height="315" src="https://www.youtube.com/embed/_oJV7JqQtu4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

Peter_Brahan_0-1648857730974.png
Peter_Brahan_0-1648857730974.png432×745 174 KB

I have about 150 blogs, so I am hoping to fix this programmatically rather than post by post. Any advice would be appreciated!

2

@Peter_Brahan -

please add this css to the very end of your base.css file and check

iframe{max-width: 100%;}
3

Thanks! I had to do this as the 100% squeezed it too much (it didn’t make it too wide, but rather it made the rectangle space super tall). I’d rather have it vary based on if it’s from YouTube or not, but this will work for me.

/*limit the width of all iframe or YouTube iframes to the width of the screen rather than the default*/
  iframe{max-width: 100%;}
  /*limit the height of all iframes to be 500 px rather than squeezing the iframe box to be super high and narrow on mobile-has to be over 454px for pinterest to show up properly*/
  iframe{max-height: 500px;}
4

For anyone who might come across this now, a fix that I chose which I think is more elegant is this:

/*fix for facebook videos being too wide on mobile */
  
iframe {
  max-width: 100%;
  height: auto;
}

This fixes the spacing around the height being off as well. Kudos to a squarespace forum for that fix:

https://forum.squarespace.com/topic/167323-facebook-video-embed-block-not-sizing-correctly-on-mobile/

5

Here’s another solution in case any of the ones already detailed don’t work for your theme.

Add the code shown in bold below to the embed code for your video…

<iframe **class="responsive-video"** title="video title..." 
class="responsive-video"

Then go to your base.css file and add the code below to the end of the file and save.

.responsive-video {
 width: 100%;
 aspect-ratio: 16 / 9;
 height: auto;

This code will force the video to be 100% of the width of whatever container it’s in across all devices, force the aspect ratio to be 16:9, and then automatically adjust the iframe height to ensure the 16:9 aspect ratio is maintained.

Once you’ve done this, you can just add the class=“responsive-video” code snippet to the embed code for any future videos you wish to display.