Похоже, что на ваш вопрос уже был получен ответ, более или менее, но для тех, кто ищет быстрый и грязный способ справиться с этим, я просто разобрал «jQuery Easy Background Resize Plug-In» и заставил его работать для видео. Довольно легко.
HTML выглядит так:
<div id="video-container">
<video autoplay="autoplay" id="video">
<source src="/videos/11280741.mp4" type="video/mp4" />
</video>
</div>
Javascript выглядит следующим образом (посмотрите видео внизу для видео)
/******************************************************
* jQuery plug-in
* Easy Background Image Resizer
* Developed by J.P. Given (http://johnpatrickgiven.com)
* Useage: anyone so long as credit is left alone
******************************************************/
(function($) {
// Global Namespace
var jqez = {};
// Define the plugin
$.fn.ezBgResize = function(options) {
// Set global to obj passed
jqez = options;
// If img option is string convert to array.
// This is in preparation for accepting an slideshow of images.
if (!$.isArray(jqez.img)) {
var tmp_img = jqez.img;
jqez.img = [tmp_img]
}
$("<img/>").attr("src", jqez.img).load(function() {
jqez.width = this.width;
jqez.height = this.height;
// Create a unique div container
$("section#content").append('<div id="jq_ez_bg"></div>');
// Add the image to it.
$("#jq_ez_bg").html('<img src="' + jqez.img[0] + '" width="' + jqez.width + '" height="' + jqez.height + '" border="0">');
// First position object
$("#jq_ez_bg").css("visibility","hidden");
// Overflow set to hidden so scroll bars don't mess up image size.
$("body").css({
"overflow":"hidden"
});
resizeImage();
});
};
$(window).bind("resize", function() {
resizeImage();
});
// Actual resize function
function resizeImage() {
$("#jq_ez_bg").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
// Image relative to its container
$("#jq_ez_bg").children('img').css("position", "relative");
// Resize the img object to the proper ratio of the window.
var iw = $("#jq_ez_bg").children('img').width();
var ih = $("#jq_ez_bg").children('img').height();
if ($(window).width() > $(window).height()) {
//console.log(iw, ih);
if (iw > ih) {
var fRatio = iw/ih;
$("#jq_ez_bg").children('img').css("width",$(window).width() + "px");
$("#jq_ez_bg").children('img').css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == 'undefined' || jqez.center) {
if ($("#jq_ez_bg").children('img').width() > $(window).width()) {
var this_left = ($("#jq_ez_bg").children('img').width() - $(window).width()) / 2;
$("#jq_ez_bg").children('img').css({
"top" : 0,
"left" : -this_left
});
}
if ($("#jq_ez_bg").children('img').height() > $(window).height()) {
var this_height = ($("#jq_ez_bg").children('img').height() - $(window).height()) / 2;
$("#jq_ez_bg").children('img').css({
"left" : 0,
"top" : -this_height
});
}
}
$("#jq_ez_bg").css({
"visibility" : "visible"
});
// Allow scrolling again
$("body").css({
"overflow":"auto"
});
$("#video-container").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
$("#video-container").children('video').css("position", "relative");
var iw = $("#video-container").children('video').width();
var ih = $("#video-container").children('video').height();
if ($(window).width() > $(window).height()) {
//console.log(iw, ih);
if (iw > ih) {
var fRatio = iw/ih;
$("#video-container").children('video').css("width",$(window).width() + "px");
$("#video-container").children('video').css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == 'undefined' || jqez.center) {
if ($("#video-container").children('video').width() > $(window).width()) {
var this_left = ($("#video-container").children('video').width() - $(window).width()) / 2;
$("#video-container").children('video').css({
"top" : 0,
"left" : -this_left
});
}
if ($("#video-container").children('video').height() > $(window).height()) {
var this_height = ($("#video-container").children('video').height() - $(window).height()) / 2;
$("#video-container").children('video').css({
"left" : 0,
"top" : -this_height
});
}
}
$("#video-container").css({
"visibility" : "visible"
});
}
})(jQuery);