I want to add an image to the specific section used in the html code whenever the screen size is resized to mobile view using media query

Question

How to add an image as a background using media queries to the section id= "vid" and hide the background video running on it. My code HTML code is shown below

<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 CSS code is shown below

@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;
}
}

score 0 · Accepted Answer · answered Mar 21 '17 at 18:16

0

Add your background image into <section> separately.

HTML

<section id="vid" class="vidd">
  <img src="css\img_forest1.jpg" class="image1"/>
  <video  playsinline autoplay muted loop poster="css\img_forest1.jpg" id="bgvd">
    <source src="video\Love-Coding.webm" type="video/webm">
  </video>
</section>

CSS

.image1{ display: none; }
@media screen and (max-width: 480px)
{
 video { display: none; }
.image1 { display: block; }
}

answered Mar 21 '17 at 18:16

Ethilium

1,224
1
14
20

Since the video is hidden, it will automatically load in the background. Is there any way that video should not load in the background – Darshan theerth Apr 25 '17 at 06:44
@Darshantheerth, have you tried adding 'controls preload="none"' to your video element? Here is some info on it: https://www.w3schools.com/tags/att_video_preload.asp . The only downside is it is not supported in EI. – Ethilium Apr 25 '17 at 12:39
@EliaWeiss had a good JQuery answer as well here: http://stackoverflow.com/questions/8873562/html5-video-preload – Ethilium Apr 25 '17 at 12:46

I want to add an image to the specific section used in the html code whenever the screen size is resized to mobile view using media query

1 Answers1