How can I use media queries to add an image as a background to the section with the id= "vid" while hiding the background video that is currently playing on it? Here is my current HTML code:
<section id="vid" class="vidd">
<video playsinline autoplay muted loop poster="css\img_forest1.jpg" id="bgvd">
<source src="video\Love-Coding.webm" type="video/webm">
</video>
</section>
And here is my CSS code:
@media screen and (max-width: 480px)
{
video { display: none; }
}
@media screen and (max-width: 480px)
{
#vid {
background: url(img_forest.jpg) no-repeat center center scroll;
}
}