Posted By

thewickedchemist on 02/12/12

Tagged

css
video
mobile

Versions (?)

Last Edited at 02/12/12 12:28pm

Statistics

Viewed 925 times

Favorited by 0 user(s)

Related snippets

Elastic Videos for Responsive Design

/ Published in: CSS

Originally from: http://webdesignerwall.com/tutorials/css-elastic-videos

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

.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 USAGE:
 
<div class="video-container">
   <iframe width="853" height="510" src="http://www.youtube.com/embed/3R2cnxz27LI" frameborder="0" ></iframe>
   </div>