How to make an embedded video iframe responsive?

I’ve got an embedded video that I need to scale down to match the size of the mobile devices. How can it automatically scale with the device size?

If you use the Webflow Video element to embed the video on the page (e.g. from YouTube, Vimeo, etc), it should be automatically responsive by default. If you are pasting in manual iframe code using the Embed element, it’s much more difficult, since there are quite a few cross-browser issues.

Let me know if you are using the Video element and still seeing that the video is not responsive.

Thanks for that. I’ll give it a shot.

Works fine, but In my case I really don’t want the title, byline and that to show up which is an issue I can’t seem to fix with Vimeo embeds…


The same goes for youtube - I really don’t want to “show suggested videos when the video finishes”…
|400xauto

@thelle We should definitely add these options to the video embed. Thanks for the feedback!

-Dan

1 Like

Cool @danro ! Maybe you could make it default for a start?

For landing pages you really don’t want people to send people other places. The differences in the iframe codes are minimal - for YouTube it’s just adding “?rel=0” and for Vimeo adding “?title=0&byline=0&portrait=0” to the “src”.

If you own these vimeo videos, the settings can also be changed in the video settings on the Vimeo site. Like this:


Not sure I completely understand @thesergie, but the basic embed settings like title, portrait & byline doesn’t seem to stem from settings:


I don’t have access to your webflow video settings on Vimeo, but by adding “?title=0&byline=0&portrait=0” to the “src” I get rid of the title, byline & portrait…

For YouTube it seems even easier - the only thing that changes are +/- of the addition of “?rel=0” in the “src”:

@thelle Thanks for the outline. Unfortunately the current video script we’re using does not allow us to modify the <iframe> source. We’re working on some ideas for more advanced video components, but for the time being you may need to use a custom HTML embed to set those custom parameters.

We’ll write up a Tips & Tricks post shortly to help with the responsive sizing of the HTML embed.

Cheers,
-Dan

2 Likes

Ok thanks for your answer @danro - looking forward to that Tips & Tricks post! Keep me posted :heart:

Please do! Because Im having the same problem with vimeo. I want to customize the player and I have to use the embed, which makes responsiveness a no-no.

@thelle, @LaurentCardinal Tutorial has been posted. Hope you find it useful!

2 Likes