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

avalcar commented Feb 1, 2018

Good stuff. Thank you!

@harricot

This comment has been minimized.

Copy link

harricot commented Feb 24, 2018

Works great, thanks!

@Poltoruhin

This comment has been minimized.

Copy link

Poltoruhin commented Apr 7, 2018

Thanks a lot!

@mrmccormack

This comment has been minimized.

Copy link

mrmccormack commented Apr 11, 2018

works with Bulma css, thanks...

@seyoum

This comment has been minimized.

Copy link

seyoum commented May 14, 2018

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

@acidjazz

This comment has been minimized.

Copy link

acidjazz commented Aug 15, 2018

@seyoum room for the controls

@mr-islam

This comment has been minimized.

Copy link

mr-islam 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

aekanshd 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

cyrusstoller commented Mar 26, 2019

Thanks for sharing this!

@Jakobud

This comment has been minimized.

Copy link

Jakobud 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

anamar2018 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.