Skip to content

Instantly share code, notes, and snippets.

@alpual
Created August 30, 2018 16:35
Show Gist options
  • Save alpual/86475c26d3a88cc0080be60a4af6c278 to your computer and use it in GitHub Desktop.
Save alpual/86475c26d3a88cc0080be60a4af6c278 to your computer and use it in GitHub Desktop.
A responsive, centered youtube video container
<style type="text/css">
.videoWrapper{
display: flex;
justify-content:center;
margin:1.75em;
}
@media screen and (min-width: 768px){
.videoWrapper{
margin: 1.75em;
}
}
@media screen and (max-width: 767px){
.videoWrapper {
position: relative;
padding-bottom: 50%; /* 16:9 */
/*padding-top: 25px;*/
height: 0;
margin:1em;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
</style>
<picture class="videoWrapper">
<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/embed/zdfYZpp3Xk8"
frameborder="0" allowfullscreen>
</iframe>
</picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment