完全流血的視頻，保持寬高比，中心，純淨javascript

Question

我希望我的元素保持其縱橫比，但充當'全面流血'或更完整的瀏覽器體驗。視頻應該向上或向下以適應新的瀏覽器窗口尺寸，但也應該集中在瀏覽器窗口中。有時，一些視頻會被裁剪 - 這與我無關。我試圖重新創建使用純JS的視頻元素的背景封面CSS屬性，如果這有助於你想象它。對於那些誰不知道那是什麼，繼承人如下：

.bkgdCover{ 
    background: no-repeat center center; 
-webkit-background-size: 100% 100%; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

以下是我嘗試做相同的純JavaScript：

function getWinSize(){ 
    var wid = 0, hei = 0; 

    if (document.documentElement && document.documentElement.clientHeight){ 
     wid = parseInt(window.innerWidth,10); 
     hei = parseInt(window.innerHeight,10); 
    } else if (document.body){ 
     wid = parseInt(document.body.offsetWidth,10); 
     hei = parseInt(document.body.offsetHeight,10); 
    } 
    return [wid,hei]; 
} 

this.resize2 = function(){ 
    fullBleedVideoPlayer(); 
}; 

function fullBleedVideoPlayer() { 
    var viewport=getWinSize(); 
    var videoRatio = 1080/1920; 
    var browserHeight = viewport[0]; 
    var browserWidth = viewport[1]; 
    var tmp_windowRatio = viewport[1]/viewport[0]; 
    if (videoRatio > tmp_windowRatio) { 
     tmp_height = Math.round(browserWidth * videoRatio); 
     _player.style.width= browserWidth+ "px"; 
     _player.style.height= tmp_height+ "px"; 
     _player.style.marginLeft = 0 + 'px'; 
     _player.style.marginTop = -Math.round((tmp_height - browserHeight)/2) + 'px'; 
    } else { 
     tmp_width = Math.round(browserHeight * (1/videoRatio)); 
     _player.style.width= tmp_width+ "px"; 
     _player.style.height= browserHeight+ "px"; 
     _player.style.marginLeft = -Math.round((tmp_width - browserWidth)/2) + 'px'; 
     _player.style.marginTop = 0 + 'px'; 
    } 
} 

不幸的是，這不會重現CSS蓋。如果你能看到我犯了什麼錯誤或自己做了同樣的事情，我很樂意聽到你的消息。請僅使用純JS解決方案。

Answer 1

我只是做了這樣的事情，除非它不是全屏，它是一個頁面標題的背景視頻，其高度爲450px'ish'。我說ish是因爲我使用25vw，它根據視口寬度改變高度。我基本上希望視頻保持中心位置，但是如何？

HTML

<section id="homepage--hero"> 
    <div class="fullpage-video-wrapper"> 
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
     <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> 
     <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"> 
     <!-- doesnt support video --> 
     <img src="#" style="width: 100%; height: auto;" /> 
    </video> 
    </div> 
</section> 

CSS

#homepage-hero { 
    display: block; 
    height: 35vw; 
    width: 100%; 
    position: 
    relative; 
    overflow: hidden; 
} 

.fullpage-video-wrapper { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden; 
} 

.fullpage-video-wrapper { 
    min-height: 100%; 
    min-width: 100%; 
} 

JS

if($('.fullpage-video-wrapper').length > 0) { 
    var videoWrapper = $('.fullpage-video-wrapper'), 
     videoParentWrapper = $(videoWrapper).parent(); 

    if($(videoWrapper).height() > $(videoParentWrapper).height()) { 
    var difference = ($(videoWrapper).height() - $(videoParentWrapper).height())/4 
    $(videoWrapper).css({ 
     bottom: -parseInt(difference) 
    }); 
    } 

    $(window).resize(function(){ 
    if($(videoWrapper).height() > $(videoParentWrapper).height()) { 
     var difference = ($(videoWrapper).height() - $(videoParentWrapper).height())/4 
     $(videoWrapper).css({ 
     bottom: -parseInt(difference) 
     }); 
    } 
    }); 
} 

這樣做是使視頻停留在相同的縱橫比，即使調整窗口時，它定位於底部的主頁 - 英雄，這導致它響應良好，而不會讓你看到黑色視頻包裝的圓形顏色，但顯然不居中。 jQuery只是將videowrapper設置爲抵消視頻包裝元素高度的高度差和它的父元素高度。允許縱橫比保持不變，在需要時播放視頻，但允許它垂直居中放置在父元素中。

這是非常粗糙的，因爲我大約一個小時前正在研究這個問題，所以我確信我需要重新修理並撥入，但希望這可以幫助你沿着你的路線，應該是除了對視頻元素或視頻換行元素outerHeight和視口高度進行高度檢查之外，同樣的解決方案。