I used coverr background video for my site but when I resize it mobile then to desktop view again, video have extra spaces. I think this is happening also in Coverr.co website. Not sure if they have support.
How can I maintain the video covered the entire div? Is this can be fixed through css media query or need to modify the javascript code of coverr?
I tried object-fit cover but I think there's no work around for IE Edge.
Here's the jquery code
$( 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');
});
}
You can use this code:
<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>
I had the same issue. The problem is with this block of code:
if(windowWidth < 1000){
videoHeight = windowHeight;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
$(this).width(videoWidth).height(videoHeight);
}
So, when you resize it to mobile, and then back, it still has the above CSS. What I did to fix it, was to include an 'else', for when you resize it back:
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("");
}
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.