Question:
I have a video on the front page of my website like this:
<section id="portada">
<video autoplay="autoplay" loop="loop" id="video_background" preload="auto" muted />
<source src="videos/video_portada.mp4" type="video/mp4" />
<source src="videos/video_web.webm" type="video/webm" />
</video/>
</section>
I would like that when the page loads from a mobile, a photo is loaded instead of the video.
I am testing like this:
<section id="portada">
<video autoplay="autoplay" loop="loop" id="video_background" preload="none" muted />
<source id="video-mp4" src="" type="video/mp4" />
<source id="video-webm" src="" type="video/webm" />
</video>
<script type="text/javascript">
if (document.documentElement.clientWidth > 768) {
document.querySelector("#video-mp4").src = "videos/video_portada.mp4";
document.querySelector('#video-webm').src = "videos/video_web.webm";
}
</script>
<img src="images/preboda/vertical_2.jpg" id="foto_portada" />
</section>
Showing the image or video with media queries:
#foto_portada{
display: none;
}
#video_background{ display: block; }
@media (max-width:768px) {
#video_background{
display: none;
}
#foto_portada{
display: block;
}
}
Answer:
You can have both (the video and the image) in your html and display them as you wish through media queries:
<section id="portada">
<video id="video" autoplay="autoplay" loop="loop" id="video_background" preload="auto" muted />
<source src="videos/video_portada.mp4" type="video/mp4" />
<source src="videos/video_web.webm" type="video/webm" />
</video/>
<img id="foto" src="loquesea.png">
</section>
For example you can split that video is visible and the image is not:
#foto{
display: none;
}
#video{
display: block;
}
And then for a certain width of your browser make the video hide and show the image. For example, between 250px and 500px the photo is shown and the video is hidden.
@media (max-width:500px) and (min-width:250px) {
#video{
display: none;
}
#foto{
display: block;
}
}
It may not be the "cleanest" way to do it, but it may work for your specs.