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
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;"
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&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
Bottom Paddingto56.25%which gives it an aspect ratio of 16:9. - Set the
Heightto0px - Explicitly set the
PositiontoRelative, 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