media queries for HTML5 background video

Question

I need help with my new website. I have a HTML5 background video on autoplay. The video is self hosted. The problem is, when the page shrinkes, it obviously looks nasty. Actually, the video does not play when viewed on a smartphone. Here is the code for my video :

                <video id="background_video" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster="img/Deer_Picture.png">
                <source src="img/deer_eating_leaves.mp4" type="video/mp4">
                <source src="img/deer_eating_leaves.webm" type="video/webm">
                Sorry, your browser does not support HTML5 video.
            </video>

And the CSS :

video { 
position: relative;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 90%;
width: auto;
height: auto%;
z-index: -100;
transform: translateX(-50%) translateY(-50%);}

I would like to have a green background instead of the video when viewed on a smartphone. To understand what's going on, here is the website : repeltecusa.com As well, I would like the h2 text to take all the space. I am currently using vw instead of px or em for the text so that it shrinkes on small devices.

Thanks

Answer 1

You can use the following, which just removes displaying the video and adds a green background to the slides:

 @media screen and (min-width: 480px) {
         #hero-slides {
             background: green;
        }

        #background_video{
            display:none;
        }
 }