Skip to content

Instantly share code, notes, and snippets.

@profstein

profstein/Responsive Embedded Video iFrame.md

Last active October 3, 2016 21:49
Show Gist options
  • Save profstein/ff87675dd5e54c44185d to your computer and use it in GitHub Desktop.
Save profstein/ff87675dd5e54c44185d to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Video iFrame Embed
Raw
Responsive Embedded Video iFrame.md
Raw
style.css
.videoWrapper {
position: relative;
padding-top: 25px;
height: 0;
}
.videoWrapper.ratio-16-9{
padding-bottom: 56.25%; /* 16:9 */
}
.videoWrapper.ratio-4-3{
padding-bottom: 75%; /* 4:3 */
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Raw
video.html
<div class="videoWrapper ratio-16-9">
<!-- iframe below is Copy & Pasted from YouTube replace with your own -->
<iframe width="853" height="480" src="http://www.youtube.com/embed/IiJzbXzOdHQ" frameborder="0" allowfullscreen></iframe>
</div><!-- end .videoWrapper -->
<div class="videoWrapper ratio-4-3">
<!-- iframe below is Copy & Pasted from YouTube replace with your own -->
<iframe width="1280" height="720" src="https://www.youtube.com/embed/tocJ_mKu1GU" frameborder="0" allowfullscreen></iframe>
</div><!-- end .videoWrapper -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment