youtube responsive

<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/1vTPNHjvbQY?autoplay=true" frameborder="0" allowfullscreen></iframe>
</figure>

<style>
video {
width: 100% !important;
height: auto !important;
}
</style>

<script type="text/javascript">
$(function() {

var $allVideos = $("iframe"),
$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();

});
</script>

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.