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
##Drag in an HTML Embed
Copy your custom embed code
Using Vimeo as an example, I’ve customized this embed & copied the code to my clipboard:
Paste the embed code into the webflow HTML embed box.
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;"
height both to
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&byline=0&portrait=0&color=ff0179&loop=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Save & close the HTML embed box.
Finally, style the HTML embed
- Give your HTML Embed a style class.
- Set the
56.25%which gives it an aspect ratio of 16:9.
- Set the
- Explicitly set the
Relative, so the label appears blue.
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
[16:9] 9 / 16 * 100 = 56.25% [16:10] 10 / 16 * 100 = 62.5% [4:3] 3 / 4 * 100 = 75%