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

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.

08/19/2018 - 17:15

renudas (not verified)

Renu Das Kolkata Escorts Services has gorgeous females provides Independent Escorts Service in Kolkata call girls at 100% satisfaction with VIP models. Provided Kolkata escorts at our agency are professional in nature and are eager to serve you at your place.
Kolkata Escorts
Call Girls in Kolkata
Kolkata Escorts
Gurgaon Escorts
Delhi Escorts
Delhi Escorts
Kolkata Escort
Escorts in Kolkata
Escorts Service in Kolkata
Female Escorts in Kolkata
Independent Escorts in Kolkata
Kolkata Escorts
Escorts in Kolkata
Escorts Service in Kolkata
Female Escorts in Kolkata
Independent Escorts in Kolkata
Gurgaon Escorts
Escorts in Gurgaon
Escorts Service in Gurgaon
Female Escorts in Gurgaon
Independent Escorts in Gurgaon

08/19/2018 - 17:16

Priya (not verified)

09/11/2018 - 04:03

Kaylee (not verified)

Thanks for sharing the informative information through the article. and all the details are awesome and good in this post.
Refer: happy wheels free to play!!

09/11/2018 - 21:14

John Bill (not verified)

It had been a while since I last came across such an amazing blog, but after reading this, I would rate this blog as by far the greatest and well organized. Good work.How To Extra Money

09/27/2018 - 07:17

Buy Finance Ass... (not verified)

By Visiting This Site I Found Cool Stuff Here Keep It Up.
Buy Finance Assignment Help

Hey! Don't miss a new cool stuff!

Comments

Add new comment