Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive YouTube, Vimeo, Embed, and HTML5 Videos with CSS Usage
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 56.34%;
}
.js-video.vimeo {
padding-top: 0;
}
<div class="js-video [vimeo, widescreen]">
[video html goes here]
</div>
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="js-video [vimeo, widescreen]">
<iframe width="560" height="315" src="http://www.youtube.com/embed/wN3gueLT0D8?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
@webcodepen

This comment has been minimized.

Copy link

@webcodepen webcodepen commented May 7, 2018

ok

@SpiritSaint

This comment has been minimized.

Copy link

@SpiritSaint SpiritSaint commented Jun 23, 2018

Thanks dude!,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment