I'm trying to adjust a popular fluid jQuery script so that it can automatically center a vimeo video vertically, without any black bars. A little horizontal cropping is acceptable. Here is my current code:
HTML
<div class="container">
<div class="videoWrapper">
<iframe class="js-resize" src="http://player.vimeo.com/video/80836225?title=0&byline=0&portrait=0&autoplay=1" frameborder="0" scrolling="no" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
CSS
.container {
height: 100%;
width:auto;
}
.videoWrapper {
position: relative;
height: 100%;
width: auto;
}
.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
html, body {
margin: 0px;
padding: 0px;
}
JS
// jQuery 1.6.2
// Find all YouTube videos
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Calculate and store aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
// Resize videos on window resize
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize videos based on aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
}).resize();