[英]How to maintain video cover entire div
我在網站上使用了掩體背景視頻,但是當我將其調整為移動設備的大小,然后再次移至桌面視圖時,視頻會有多余的空間。 我認為這也在Coverr.co網站上發生。 不知道他們是否有支持。
如何保持視頻覆蓋整個div? 是否可以通過CSS媒體查詢解決此問題,或者需要修改Coverr的JavaScript代碼?
我嘗試過適合物體的保護套,但我認為IE Edge無法解決。
這是jQuery代碼
$( document ).ready(function() {
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
function scaleVideoContainer() {
var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);
}
function initBannerVideoSize(element){
$(element).each(function(){
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element){
var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;
// console.log(windowHeight);
$(element).each(function(){
var videoAspectRatio =
$(this).data('height')/$(this).data('width');
$(this).width(windowWidth);
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
您可以使用以下代碼:
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; ">
<video width="100% " controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4 " type="video/mp4 ">
<source src="https://www.w3schools.com/html/mov_bbb.ogg " type="video/ogg "> Your browser does not support HTML5 video.
</video>
</div>
我遇到過同樣的問題。 問題在於此代碼塊:
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
因此,當您將其調整為移動大小,然后再調整為大小時,它仍然具有上述CSS。 我所做的修復工作是添加一個“ else”,以便您調整大小時:
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'}
$(this).width(videoWidth).height(videoHeight)
}
else{
// this resets the CSS applied above
$(this).css({'margin-top' : '', 'margin-left' : ''});
$(this).width(windowWidth).height("");
}
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.