Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure CSS solution for embed videos with an aspect ratio of 16:9
.video-container {
position: relative;
padding-bottom: 56.25%; /*16:9*/
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe width="640" height="360" src="//www.youtube.com/embed/ukKd8W3Bvo0" frameborder="0" allowfullscreen></iframe>
</div>
@avalcar

This comment has been minimized.

Copy link

commented Feb 1, 2018

Good stuff. Thank you!

@harricot

This comment has been minimized.

Copy link

commented Feb 24, 2018

Works great, thanks!

@Poltoruhin

This comment has been minimized.

Copy link

commented Apr 7, 2018

Thanks a lot!

@mrmccormack

This comment has been minimized.

Copy link

commented Apr 11, 2018

works with Bulma css, thanks...

@seyoum

This comment has been minimized.

Copy link

commented May 14, 2018

Whats up with the padding-top: 30px; ? What is that for?

@acidjazz

This comment has been minimized.

Copy link

commented Aug 15, 2018

@seyoum room for the controls

@mr-islam

This comment has been minimized.

Copy link

commented Oct 3, 2018

Thank you

also thank you @mrmccormack for mentioning bulma so that it showed up in my search results!!

@aekanshd

This comment has been minimized.

Copy link

commented Dec 24, 2018

works with Bulma css, thanks...

Thanks! Searching for bulma responsive video got me here.

@cyrusstoller

This comment has been minimized.

Copy link

commented Mar 26, 2019

Thanks for sharing this!

@Jakobud

This comment has been minimized.

Copy link

commented May 16, 2019

Whats up with the 30px padding-top? What is the point of that?

@anamar2018

This comment has been minimized.

Copy link

commented Jul 9, 2019

Thanks for sharing this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.