How to create responsive youtube iframe on webflow

Community resources Webflow Tips
1

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

image
image1308×518 185 KB

Copy (ctr + C)

1.2.Webflow side

Paste (ctr + V)

image

image
image1004×808 85.5 KB

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
    image
    image254×669 24.7 KB

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>

image
image805×368 15.3 KB

Save. Done :slight_smile:

image
image1478×482 107 KB

image

Reference:

VIEMO

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

image
image1054×583 44.9 KB

image

image
image563×841 119 KB

9 Likes
2

Thanks for sharing with us @Siton_Systems :webflow_heart:

3

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…

4

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

1 Like
5

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