html5 – Upload photo on mobile instead of video

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.