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

Tags: 
video
youtube
css
×

Hey! Don't miss a new cool stuff!

Comments

05/03/2018 - 10:39
Anonymous (not verified)

This post has several smart concepts. I actually liked the method you ready this post. A piece of writing is standard technique to verbal communication. It needed a talent to specific the thought clearly to the readers. Thanks again! I actually have some sensible work expertise with write my essay ( https://essayjaguar.com )and my words are clearly supported what I felt through such processes within the past

06/19/2018 - 16:02
Anonymous (not verified)

Thank you for letting us know about this easy thing to do. I know that some people at the https://www.instagram.com/edubirdie/?hl=en site didn't know how to do this properly. After reading this detailed post, they certainly know now.

Add new comment