Streaming live at 10am (PST)

How to create responsive youtube iframe on webflow

#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

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:
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

3 Likes
Div with youtube-video height '100%' not correct
Div with youtube-video height '100%' not correct
Website is opening partially scrolled down (Picture)
#2

Thanks for sharing with us @Siton_Systems :webflow_heart: