[Tutorial] Responsive Video using HTML Embed

Community resources Webflow Tips
1

When working with external video (or any other content) in an <iframe>, we can use the following CSS trick to scale our element to a specific aspect ratio.

Note: Webflow already has a responsive video component which will
handle most types of videos. This tutorial is for advanced users who
need more options for their <iframe> embeds.

##Drag in an HTML Embed

2880×1492 487 KB

Copy your custom embed code

Using Vimeo as an example, I’ve customized this embed & copied the code to my clipboard:

2078×1354 414 KB

Paste the embed code into the webflow HTML embed box.

2192×986 227 KB

Modify your embed code

We must then modify the <iframe> tag in the HTML embed box.

Add the following attribute: style="position: absolute; top: 0; left: 0;"
Change the width and height both to 100%

After these modifications, your code should look something like this:

<iframe style="position: absolute; top: 0; left: 0;"
src="//player.vimeo.com/video/70732596?title=0&amp;byline=0&amp;portrait=0&amp;color=ff0179&amp;loop=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Save & close the HTML embed box.

Finally, style the HTML embed

2880×1494 665 KB

  1. Give your HTML Embed a style class.
  2. Set the Bottom Padding to 56.25% which gives it an aspect ratio of 16:9.
  3. Set the Height to 0px
  4. Explicitly set the Position to Relative, so the label appears blue.

That’s it!

You can view a working example here: http://aspect-embed.webflow.com/

And preview in Webflow designer here.

How to calculate aspect ratio

If your content requires a different aspect ratio than 16:9, you can use a simple formula to determine the percentage value to use for Bottom Padding.

[16:9]
9 / 16 * 100 = 56.25%

[16:10]
10 / 16 * 100 = 62.5%

[4:3]
3 / 4 * 100 = 75%

Happy embedding!
-Dan

26 Likes
2

Thanks @danro, you guys rock.

1 Like
5

@danro Hi Dan, how were you able to prevent multiple video instances from playing over each other? Your example page toggles pause on the first video automatically when you hit play on the second instance. Is that a built in property of Vimeo embeds?

Great tutorial - thank you!

6

Hi @vlogic, those play controls are controlled by the vimeo embed, it is not something extra we are putting in to control that. If you try to use a normal .mp4, hosted on your own server, not using the Vimeo plugin in the iframe, then those videos will continue to play when started, even though you start multiple videos.

If you want fine control over your videos, both YouTube and Vimeo have developer APIs that you can use to control your videos using javascript.

Cheers,
Dave

1 Like