Youtube embedded Videos not resizing for mobile (Dawn Theme)

Technical Q&A
1

Youtube videos inserted on page using the Dawn Theme is not downsizing for mobile screens.

Other Themes would downsize youtube video for mobile screens automatically. Does anyone know of a solution?

Here is the embedded code provided by Youtube:

Here is the code from the page:

2 Likes
2

@patrickanthony

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi, take a look to this thread, there is a CSS-Solution already, if you are stucked, we could fix this with a few lines of code:

https://community.shopify.com/c/online-store-2-0/different-video-size-for-desktop-amp-mobile/td-p/1356827

4

https://wherecanibuyanebulizer.com/products/mesh%E2%84%A2-portable-nebulizer-handheld-battery-inhaler-machine-mini-elite-roscoe-med4home-otc-18-remaining

5

  1. Make a duplicate of them. Just in case.

  2. In the copy go to ‘Edit Code’

  3. Go to ‘Sections’ and find base.css

  4. Copy and Paste this code at the bottom of base.css

/* code for youtube video resizing */

youtube embedded code
*/ .iframe-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .iframe-container iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
  1. When you embed any and all Youtube Videos on your site, you must add this at the beginning:

and add this at the end:

So it will look like this:

Done! Now videos will resize according to screen. All videos embedded correctly ofcourse.

There you go… actual step by step advice that for some reason is REALLY difficult to get in this shopify community.

6

Hi Patrick - I was having the same problem, thanks for the simple solution. However, I think there’s a typo in your CSS - you have duplicate */ closes in your comment out note at the start. I removed the first */ and it works brilliantly.

Your code:

/* code for youtube video resizing */

youtube embedded code
*/

Corrected code:

/* code for youtube video resizing

youtube embedded code
*/
7

I need HELP!!!

1 Like
8

@spadeexchangeco

how can i help you? please share more details

9

HI Patrick, thank you for this. It mostly worked for my website except it now has other elements overlapping. please see here: https://canadianbaristainstitute.com/blogs/video/working-as-a-team

10

Thank you for sharing this. I have been facing the same issue and now it resolved.