Created
August 7, 2014 10:28
-
-
Save vienhoang/eba723de6c5657529e4f to your computer and use it in GitHub Desktop.
CSS: Responsive video hack
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/***********************************************************************************************/ | |
/* | |
http://www.developerdrive.com/2012/07/adding-responsive-videos-to-your-design/ | |
RESPONSIVE VIDEO HACK | |
*/ | |
/***********************************************************************************************/ | |
/*Restrict the width of videos*/ | |
.video-wrapper { | |
width: 600px; | |
max-width: 100%; | |
} | |
.video-container { | |
position: relative; | |
padding-bottom: 56.25%; | |
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%; | |
} | |
/*HTML*/ | |
<div class="video-wrapper"> | |
<div class="video-container"> | |
<iframe width="640" height="360" src="//www.youtube.com/embed/3R2cnxz27LI" frameborder="0" allowfullscreen></iframe> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment