Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, the video displays in full width and height, just as desired. However, the border may reappear after refreshing, affecting both desktop and mobile experience. Can anyone offer some guidance?
// Video Background
/** Document Ready Functions **/
/********************************************************************/
$(document).ready(function() {
// Resize video
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');
});
});
/** Reusable Functions **/
/********************************************************************/
function scaleVideoContainer() {
var height = $(window).height();
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(),
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function() {
var videoAspectRatio = $(this).data('height') / $(this).data('width'),
windowAspectRatio = windowHeight / windowWidth;
if (videoAspectRatio > windowAspectRatio) {
videoWidth = windowWidth;
videoHeight = videoWidth * videoAspectRatio;
$(this).css({
'top': -(videoHeight - windowHeight) / 2 + 'px',
'margin-left': 0
});
} else {
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');
});
}.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container .title-container {
z-index: 1000;
position: absolute;
top: 35%;
width: 100%;
text-align: center;
color: #fff;
}
.video-container .description .inner {
font-size: 1em;
width: 45%;
margin: 0 auto;
}
.video-container .link {
position: absolute;
bottom: 3em;
width: 100%;
text-align: center;
z-index: 1001;
font-size: 2em;
color: #fff;
}
.video-container .link a {
color: #fff;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- VIDEO BACKGROUND -->
<div class="homepage-hero-module">
<div class="video-container">
<div class="title-container">
<div class="headline">
<h1>Welcome to the Devix Theme</h1>
</div>
<div class="description">
<div class="inner">This is the Demo for the Devix Theme with Video Background.</div>
</div>
</div>
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://www.devix-design.com/demos/static/devixtheme/video/video/backgroundvideo.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.</video>
<div class="poster hidden">
<img src="http://www.videojs.com/img/poster.jpg" alt="">
</div>
</div>
</div>
<!-- video-background -->