How to make a YouTube embed video responsive using CSS

Posted by admin on Sat, 02/10/2018 - 08:33

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

×

Hey! Don't miss a new cool stuff!

Comments

test (not verified)

test

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

Christy (not verified)

Νice! Thanks for this article!

Visit my page; Zakir at Web

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

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

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

Douglas (not verified)

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

Here is my page ... Zakir Muravyov

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

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

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

Add new comment