Right now, I have a background video that I'd like to display only on devices larger than 768px (width). When you collapse the browser past 768px, the video disappears, and the poster.jpg for the video is displayed as the background instead.
All is working well with simple CSS, but the video is still loading on mobile devices, even though it's not being displayed.
Here's the HTML I'm using:
<div id="video_container">
<video id="video-bg" autoplay loop muted data-wow-duration="2s">
<source src="/video/bg.webm" type="video/webm">
<source src="/video/bg.mp4" type="video/mp4">
<source src="/video/bg.ogg" type="video/ogg">
</video>
</div>
And the SCSS:
#video_container{
background-size: cover;
position:relative;
z-index:-1;
background: #000 (/video/poster.jpg) no-repeat;
width:100%;
height:100%;
display:block;
background-position:center center;
overflow:hidden;
#video-bg {
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -100;
display:none;
@media(min-width: 768px){
display:block;
}
}
}
Any help would be greatly appreciated.
You need to use JavaScript to play and pause the video whenever the screen resizes.
Edit: With this approach you don't need to have the
autoplay
attribute (it will start playing via JS) and avoid loading the file entirely in small devices.