DEV Community

Cover image for Embed YouTube videos responsively
chantastic
chantastic

Posted on • Originally published at chan.dev

Embed YouTube videos responsively

YouTube makes it easy to copy-paste a video embed.
LOVE THAT!

But, the default embed isn't responsive so it is guaranteed to look shit wherever you embed it.

I've drug this snippet around the internet with me for years.

/* youtube embed wrapper */
[data-responsive-youtube-container] {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin: 1em 0;
}

[data-responsive-youtube-container] > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Enter fullscreen mode Exit fullscreen mode

I adapted it to use AVO 🥑 CSS, my data attributes specification of BEM.
But I didn't write the styles.
I hate magic numbers like 56.25%, and I would have tried to avoid it until giving up 😆

Usage

  1. Copy a YouTube embed from the share sheet.
  2. Paste that embed in an HTML or markdown file.
  3. Wrap it in a block-element container with the data-responsive-youtube-container selector.
  4. Enjoy cointainer-aware responsive videos!
<div data-responsive-youtube-container>
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/u63pOK6Zyog"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
  ></iframe>
</div>
Enter fullscreen mode Exit fullscreen mode

Embed responsively!

Bonus

This works with layouts as well.
Around chan.dev, you'll see this paired with a flex and grid layout.

Help me attribute this

If you know where I originally swiped this from, let me know so I can give the author credit here.

I'm @chantastic on twitter and discord.

Top comments (1)

Collapse
 
topstik profile image
topstik

Keep shining your light and making a positive difference in the world. I will try! Thanks