Skip to content

Instantly share code, notes, and snippets.

@labsecrets
Created January 23, 2012 21:31
Show Gist options
  • Save labsecrets/1665628 to your computer and use it in GitHub Desktop.
Save labsecrets/1665628 to your computer and use it in GitHub Desktop.
Responsive Video Embeds
To ensure that your video embeds respond to changes in browser
size and scale, wrap your video embed code with the following
division class:
<div class="video-container">
<iframe src="YOUR VIDEO EMBED CODE HERE"></iframe>
</div>
Then, in your style sheet, add the following css:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment