How to create responsive youtube iframe on webflow

In cases, you want to use youtube as embed HTML iframe (Instead of webflow video widget).

Less than 1 min.

1/2. Pre Steps

1.1. Youtube side

Get the embed code
image

image

Copy (ctr + C)

1.2.Webflow side

Paste (ctr + V)

image

2/2. How to Tutorial:

2.1

Create class for the embed HTML

  • A. Set position to relative
  • B. Set padding-top to 56.25% (Why 56.25%? Read her about aspect ratio (by w3schools))
  • C. Set height to 0

2.2

Add custom class (.iframe-fluid in this example) for your iframe and add this custom code (before head by page / embed or before head entire site)

<style>
iframe.iframe-fluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>


Save. Done :slight_smile:

image

Reference:

VIEMO

**viemo interface use the same trick (56.25% padding):

image

9 Likes

Thanks for sharing with us @Siton_Systems :webflow_heart:

It is also necessary to put the embed within another div… lets call it .youtube-wrapper and give this position: relative so it won’t break your layout…

You can also just add position: relative to the embed block.

1 Like

Could you share an example/situation where an iFrame would be better than the webglow video widget? :eyes: