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
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;
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments