Hi Community
I am using a theme called Quest. On my homepage, I am trying to run a responsive video depending on the user’s screen size. When I test the Html and CSS I am using (below) it works fine, however when I add the code to the Video module, the header cuts off some of the video on Desktop, and almost wholly dominates the Tablet and Mobile screen without showing the video at all. This is the code that I am using. Any advice would be appreciated immensely:
<html>
<video id=“background-video” autoplay loop muted poster=“https://assets.codepen.io/6093409/river.jpg”>
<source src=“https://storage.googleapis.com/outdoorappliances/Outdoor%20Appliances.mp4”>
</video>
<style>/* video background */
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
@media (max-width: 950px) {
#background-video { display: none; }
body {
background: url(“https://f.hubspotusercontent-eu1.net/hubfs/26497125/Outdoor%20Appliances%20UK.png”) no-repeat;
background-size: cover;
}
}
</style>
</html>