Таким образом, у меня есть этот видео-тег, случайный видео-тег с фиксированным положением, сверху и слева установлен в 0px.
Вы можете найти пример здесь: http://stvdd.com/video/
У меня есть этот маленький скрипт:
$(document).ready(function() {
$('#bgvideo').on("loadedmetadata", scaleVid);
$(window).resize(function() {
scaleVid();
})
function scaleVid(){
if($(window).width()/$(window).height() > 1.7777777){
$('#bgvideo').css({
'width':$(window).width()
})
}
else
$('#bgvideo').css({
'height':$(window).height()
})
}
});
Здесь проблема: когда я изменяю размер всего один или два раза, она работает. Но когда я изменяю размер очень быстро и просто играю с моим размером окна, он испугается. Разрешение видео составляет 16: 9, следовательно, 1,77777 (я хочу, чтобы он поддерживал пропорцию)
возможно, событие изменения размера стреляет больше, чем вы хотите.
может быть ошибкой события изменения размера в некоторых браузерах, которые срабатывают несколько раз при перетаскивании:
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
вы можете попробовать polyfill для события изменения размера Paul Irish:
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
а затем используйте вот так:
// usage:
$(window).smartresize(function(){
// code goes here
scaleVid();
});
хорошая демонстрация его использования: