Streaming live at 10am (PST)

[Tutorial] Responsive Video using HTML Embed


#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

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&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

  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


Responsive Vimeo Embeds
How to make an embedded video iframe responsive?
Is there any way to put a video bg inside a section (responsive)?
Issue with video/html embed and Firefox (for Mac)
Grid Aspect Ratio - Help
Ability to use Video Sources in Video Widget from any host url
Auto Play Vimeo Videos
Start playing a video when a user scrolls and a video is in view
Need help with Full Width Slider / Responsive Video inside Flex Box
Custom code causing styling issues on additional elements added to page
Facebook portrait videos
Vimeo links w/ timecode start not working in lightbox
Placing vimeo or youtube videos in a site w/o titles and extra graphics
Include Video from own Server
Videos in Sliders
Background Video Display
Youtube Embed - Autoplay, Loop, Responsive with No Controls!
Youtube video not displaying well on mobile landscape view
#2

Thanks @danro, you guys rock.


#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!


Responsive video holder
#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


#7