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.

07/13/2018 - 16:17
Scott (not verified)

Thanks for teaching us how to do this here. When I asked this to my writing service friends, they didn't give me any answer, and it was sad to see that. They give me answers most of the time, but here they didn't and it's sad.

07/23/2018 - 13:18
Susan James (not verified)

Idealize! Exactly what I required, worked immediately. I as of late propelled a site on PHP instructional exercises yet I as of now had a YouTube channel covering comparative stuff. So I was searching for an approach to install a video at the base end of my content instructional exercises.do my homework
Anyway, a debt of gratitude is in order for posting this!

07/26/2018 - 14:39
PeterRobson (not verified)

When you have included this code, copy the offer URL of the YouTube video being referred to. Explore to Blog, Landing Pages, or Website Pages. Drift over the page or post, Essay Writing Help at that point click Edit. In a rich text module, click Insert in the toolbar, at that point select Embed.

Add new comment