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%