You are on page 1of 2

http://jsfiddle.

net/mahbub/b8Wcz/
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
KCQWK-Q43V3-M3F2T-83VGV-Y6VTX
youtube Everything Else
JS FILE
$(function() {
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='htt
p://www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});
CSS
video {
width: 100%
height: auto
}

!important;
!important;

<div class="video-responsive">
2.
<iframe width="420" height="315" src="https://www.youtube.com/embed/6xisazZX9bA"
frameborder="0" allowfullscreen></iframe>
3.
</div>
.video-responsive{

02.
overflow:hidden;
03.
padding-bottom:56.25%;
04.
position:relative;
05.
height:0;
06.
}
07.
.video-responsive iframe{
08.
left:0;
09.
top:0;
10.
height:100%;
11.
width:100%;
12.
position:absolute;
13.
}

You might also like