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

09/19/2019 - 06:06

test (not verified)

test

10/08/2019 - 04:15

Valeria (not verified)

Ꭲhere is definitely lotѕ to learn on this mаtter.

I like all the pointѕ you made.

Have a lߋok at my web site Dorofei Mishin

09/27/2019 - 05:25

PUNAM (not verified)

ESCORTS IN KOLKATA
KOLKATA ESCORTS
KOLKATA ESCORT
ESCORTS SERVICE IN KOLKATA
ESCORT SERVICE KOLKATA
ESCORTS SERVICE
ESCORT SERVICE
ESCORT
ESCORTS
FEMALE ESCORTS SERVICE KOLKATA
KOLKATA FEMALE ESCORTS SERVICE
INDEPENDENT ESCORTS SERVICE
INDEPENDENT ESCOTRTS SERVIC KOLKATA
KOLKATA INDEPENDET ESCORTS SERVICE
RUSSIAN ESCORTS SERVICE KOLKATA
RUSSIAN ESCORTS SERVICE
KOLKATA RUSSIAN ESCORTS SERVICE
FOREIGN ESCORTS SERVICE IN KOLKATA
INDEPENDEN FOREIGN ESCORTS SERVICE
ESCORT FOREIGN SERVICE IN KOLKATA
SEXY FEMALE ESCORTS SERVICE
SEXY MODEL ESCORTS SERVICE
MODEL ESCORTS CALL GIRLS
MODEL ESCORTS CALL GIRLS SERVICE KOLKATA
CALL GIRLS SERVICE KOLKATA
CALL GIRLS IN KOLKATA
KOLKATA CALL GIRLS
CALL GIRLS
CALL GIRLS KOLKATA
KOLKATA CALL GIRLS
FEMALE CALL GIRLS KOLKATA
FEMALE CALL GIRLS
SEXY CALL GIRLS SERVICE IN KOLKATA
ESCORTS SERVICE IN KOLKATA
KOLKATA FEMALE ESCORT SERVICE
TOP ESCORTS SERVICE KOLKATA
BEST KOLKATA ESCORTS SERVICE
CALL GIRLS SERVICE
ESCORTS SERVICE
ESCORT SERVICE
ESCORTS SERVICE IN KOLKATA
BENGOLI ESCORTS GIRLS
BENGOLI CALL GIRLS KOLKATA
KOLKATA ESCORTS SERVICE
FREE ESCORTS SERVICE KOLKATA
FREE WHATSAAP NUMBER ESCORTS
FREE WHATSAAP NUMBER OF CALL GIRLS
PHONE NUMBER OF ESCORTS SERVICE
FREE PHONE NUMBER ESCORTS SERVICE
MOBILE NUMBER OF ESCORTS SERVICE

09/27/2019 - 05:26

PUNAM YADAV (not verified)

09/29/2019 - 14:52

Christy (not verified)

Νice! Thanks for this article!

Visit my page; Zakir at Web

09/29/2019 - 15:24

Gia (not verified)

Gooɗ writeᥙp. I featured your blog on my Twitter.

I hope my fans are going to liкe your writing as well.

Would like to see mⲟre from you!

Take a loօk at my blog: Ivan Voronkov

10/01/2019 - 15:41

Zachery (not verified)

Probably оne of my fave blogs to look thгough in the morning with

a cᥙp of coffee !

Feel free to visit my webpage - Oleg Glazkov

09/27/2019 - 05:27

Anonymous (not verified)

KOLKATA ESCORTS
KOLKATA ESCORT
ESCORTS SERVICE IN KOLKATA
ESCORT SERVICE KOLKATA
ESCORTS SERVICE
ESCORT SERVICE
ESCORT
ESCORTS
FEMALE ESCORTS SERVICE KOLKATA
KOLKATA FEMALE ESCORTS SERVICE
INDEPENDENT ESCORTS SERVICE
INDEPENDENT ESCOTRTS SERVIC KOLKATA
KOLKATA INDEPENDET ESCORTS SERVICE
RUSSIAN ESCORTS SERVICE KOLKATA
RUSSIAN ESCORTS SERVICE
KOLKATA RUSSIAN ESCORTS SERVICE
FOREIGN ESCORTS SERVICE IN KOLKATA
INDEPENDEN FOREIGN ESCORTS SERVICE
ESCORT FOREIGN SERVICE IN KOLKATA
SEXY FEMALE ESCORTS SERVICE
SEXY MODEL ESCORTS SERVICE
MODEL ESCORTS CALL GIRLS
MODEL ESCORTS CALL GIRLS SERVICE KOLKATA
CALL GIRLS SERVICE KOLKATA
CALL GIRLS IN KOLKATA
KOLKATA CALL GIRLS
CALL GIRLS
CALL GIRLS KOLKATA
KOLKATA CALL GIRLS
FEMALE CALL GIRLS KOLKATA
FEMALE CALL GIRLS
SEXY CALL GIRLS SERVICE IN KOLKATA
ESCORTS SERVICE IN KOLKATA
KOLKATA FEMALE ESCORT SERVICE
TOP ESCORTS SERVICE KOLKATA
BEST KOLKATA ESCORTS SERVICE
CALL GIRLS SERVICE
ESCORTS SERVICE
ESCORT SERVICE
ESCORTS SERVICE IN KOLKATA
BENGOLI ESCORTS GIRLS
BENGOLI CALL GIRLS KOLKATA
KOLKATA ESCORTS SERVICE
FREE ESCORTS SERVICE KOLKATA
FREE WHATSAAP NUMBER ESCORTS

09/27/2019 - 19:59

Eugenia (not verified)

Such a fantastic write-up! Definitely a should-read and a discovery!

This just worked for me thank you.

my blog post: Victor Maker

09/29/2019 - 12:02

Douglas (not verified)

Nіce! Thanks a lot fоr the article!

Here is my page ... Zakir Muravyov

10/07/2019 - 07:31

Stephan (not verified)

Wһat a helpful write-up! Ꮢeally а should-reaⅾ and a discovery!

This definitely worked for me thanks.

Visit my website :: Arkady Kalinin

09/30/2019 - 16:06

Rosalind (not verified)

Probably оne of mʏ mоst favoritе sites to look

through when starting the day wіth a drink of coffee of

course!

Feeⅼ free to visit my homepaɡe :: Gordey Pokrovsky

10/01/2019 - 02:25

Rex (not verified)

I liкe your post! I read your blog quite reɡularly, and you're constantly coming uр with

ѕome good staff. I shared this blog post on my Tumƅlr,

and my followers liked it. Keep up the gooԀ work.

Look at my web-site ... Philemon Denisov

10/18/2019 - 22:14

bangalore escor... (not verified)

BANGALORE FEMALE ESCORT SERVICE
TOP ESCORTS SERVICE BANGALORE
BEST BANGALORE ESCORTS SERVICE
CALL GIRLS SERVICE
ESCORTS SERVICE
ESCORT SERVICE
ESCORTS SERVICE IN BANGALORE
BANGALORE ESCORTS SERVICE
FREE ESCORTS SERVICE BANGALORE
FREE WHATSAAP NUMBER ESCORTS
FREE WHATSAAP NUMBER OF CALL GIRLS
PHONE NUMBER OF ESCORTS SERVICE
FREE PHONE NUMBER ESCORTS SERVICE
MOBILE NUMBER OF ESCORTS SERVICE
ESCORTS IN BANGALORE
BANGALORE ESCORTS
BANGALORE ESCORT
ESCORTS SERVICE IN BANGALORE
ESCORT SERVICE BANGALORE
ESCORTS SERVICE
ESCORT SERVICE
ESCORT
ESCORTS
FEMALE ESCORTS SERVICE BANGALORE
BANGALORE FEMALE ESCORTS SERVICE
INDEPENDENT ESCORTS SERVICE
INDEPENDENT ESCOTRTS SERVIC BANGALORE
BANGALORE INDEPENDET ESCORTS SERVICE
RUSSIAN ESCORTS SERVICE BANGALORE
RUSSIAN ESCORTS SERVICE
BANGALORE RUSSIAN ESCORTS SERVICE
FOREIGN ESCORTS SERVICE IN BANGALORE
INDEPENDEN FOREIGN ESCORTS SERVICE
ESCORT FOREIGN SERVICE IN BANGALORE
SEXY FEMALE ESCORTS SERVICE
SEXY MODEL ESCORTS SERVICE
MODEL ESCORTS CALL GIRLS
MODEL ESCORTS CALL GIRLS SERVICE BANGALORE
CALL GIRLS SERVICE BANGALORE
CALL GIRLS IN BANGALORE
BANGALORE CALL GIRLS
CALL GIRLS
CALL GIRLS BANGALORE
BANGALORE CALL GIRLS
FEMALE CALL GIRLS BANGALORE
FEMALE CALL GIRLS
SEXY CALL GIRLS SERVICE IN BANGALORE
ESCORTS SERVICE IN BANGALORE
BANGALORE FEMALE ESCORT SERVICE
TOP ESCORTS SERVICE BANGALORE
BEST BANGALORE ESCORTS SERVICE
CALL GIRLS SERVICE
ESCORTS SERVICE

10/18/2019 - 22:15

bangalore escorts se (not verified)

PHONE NUMBER OF ESCORTS SERVICE
FREE PHONE NUMBER ESCORTS SERVICE
MOBILE NUMBER OF ESCORTS SERVICE
ESCORTS IN BANGALORE
BANGALORE ESCORTS
BANGALORE ESCORT
ESCORTS SERVICE IN BANGALORE
ESCORT SERVICE BANGALORE
ESCORTS SERVICE
ESCORT SERVICE
ESCORT
ESCORTS
FEMALE ESCORTS SERVICE BANGALORE
BANGALORE FEMALE ESCORTS SERVICE
INDEPENDENT ESCORTS SERVICE
INDEPENDENT ESCOTRTS SERVIC BANGALORE
BANGALORE INDEPENDET ESCORTS SERVICE
RUSSIAN ESCORTS SERVICE BANGALORE
RUSSIAN ESCORTS SERVICE
BANGALORE RUSSIAN ESCORTS SERVICE
FOREIGN ESCORTS SERVICE IN BANGALORE
INDEPENDEN FOREIGN ESCORTS SERVICE
ESCORT FOREIGN SERVICE IN BANGALORE
SEXY FEMALE ESCORTS SERVICE
SEXY MODEL ESCORTS SERVICE
MODEL ESCORTS CALL GIRLS
MODEL ESCORTS CALL GIRLS SERVICE BANGALORE
CALL GIRLS SERVICE BANGALORE
CALL GIRLS IN BANGALORE
BANGALORE CALL GIRLS
CALL GIRLS
CALL GIRLS BANGALORE
BANGALORE CALL GIRLS
FEMALE CALL GIRLS BANGALORE
FEMALE CALL GIRLS
SEXY CALL GIRLS SERVICE IN BANGALORE
ESCORTS SERVICE IN BANGALORE
BANGALORE FEMALE ESCORT SERVICE
TOP ESCORTS SERVICE BANGALORE
BEST BANGALORE ESCORTS SERVICE
CALL GIRLS SERVICE
ESCORTS SERVICE
ESCORT SERVICE
ESCORTS SERVICE IN BANGALORE
MOBILE NUMBER OF ESCORTS SERVICE
BANGALORE ESCORTS SERVICE
FREE ESCORTS SERVICE BANGALORE
FREE WHATSAAP NUMBER ESCORTS
FREE WHATSAAP NUMBER OF CALL GIRLS
PHONE NUMBER OF ESCORTS SERVICE
FREE PHONE NUMBER ESCORTS SERVICE

Hey! Don't miss a new cool stuff!

Comments

Add new comment