Youtube videos scaling for mobile?

So I have a videos page on one of my clients site. It does not scale the youtube videos to display correctly on mobile sites. Any recommendations or do I have do create a mobile version of the page…


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

How do you have the videos inserted into the page? What is the div layering structure?

This is one way you can accomplish this:

In your youtube embed code add this to the iframe tag:

style=“position: absolute” width=“100%” height=“100%”

Now the Youtube video will automatically scale to the size of the parent container. In your case it will be the “HTML Embed Element” that Webflow has, which you can style as you normally would.

In order for this to work you need to make sure the parent element (the HTML Embed Element) has the position set to something. It cannot be set to auto or the iframe will ignore it.

Here’s a quick example I put together: https://preview.webflow.com/preview/youtube-example?preview=c81346ec042dd94d72762ce58dc7f2b8

I can’t know for sure if this will work for you since I can’t see your project, but hopefully this helps :smiley:

Awesome! I love this community!

1 Like

Hi William_Burgess,

I would like to offer you one more option!
You can use the plugin, which is adjusted for all screen resolutions and it will look perfect on any device: YouTube Channel widget - Add YouTube Video Gallery to website (2022). With the help of this plugin you can create videos, galleries and even channels on your website.

A nice bonus - you can use an affiliate program to get 30% of transaction value back for each client :wink:

Thanks for reading this and I hope it will help!)

3 Likes

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.