How to make a YouTube embed video responsive using CSS

Quick snippet how to make a youtube embed video responsive by CSS only.

The easiest way, using viewport units (IE9+)

iframe {
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
    background:red;  
}

CSS2 style fix using a CSS trick and wrapper with class .aspect-ratio:

    .aspect-ratio {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
    }
 
    /* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
    .aspect-ratio iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }

Check here: https://jsfiddle.net/fhde7ddd

Tags:

video

youtube

css

Hey! Don't miss a new cool stuff!

Comments

02/06/2019 - 12:00

Pune Escort (not verified)

Want to seek services from the Call Girls in Pune, call our agency now to avail the best escort girls in Pune within affordable prices.

escorts girls services in Pune
call girls services in Pune
female escorts in Pune
Pune escorts girls
cheap escorts in Pune
Pune escorts call girls
independent escorts girls in Pune
housewife escorts in Pune
vip escort service Pune
Pune escorts photos
cheap escorts Pune
air hostess escorts in Pune
female call girls in Pune
escort girl servcies in Pune
escort in Pune
high profile Pune escorts
professional escorts in Pune
Pune Escorts
Independent Pune Escorts
Pune Escorts Agency
Model escorts in Pune
vip call girls in Pune
whatsapp escorts in Pune
Escorts Service in Pune
Indian Escors in Pune

02/11/2019 - 11:52

vidmate (not verified)

Good write-up and its really great to read the description which is provide in this articles. Just have a look of vidmate a video downloader app for this type of article seminar.

02/25/2019 - 13:33

vidmate (not verified)

I have bookmark this article page. Just have a look on vidmate a video downloader app for this type of article.

02/28/2019 - 12:33

Harshita Gaur (not verified)

03/20/2019 - 12:03

Escort Rides (not verified)

Hey! Don't miss a new cool stuff!

Comments

Add new comment