0

I have an Python/Flask Application which needs to show background-Video on large screen such as desktop, Laptops and tablets. But for phone it should show only the images and not the video? How can i do it? and can it be done using only CSS/Jquery?

vinit kantrod
  • 1,006
  • 12
  • 14

2 Answers2

1

Yes, yes it can. Assuming you only have one video, you need to take a screenshot of the first frame and save it as an image. In Javascript, you want to check the nature of the device, then hide the video and display the image if a mobile browser is detected, otherwise show the video and hide the image. There's a concise method for getting device type over at this question.

This is how I'd do it, but YMMV:

Javascript

$('document').ready(function() {
     if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|UC Browser/i.test(navigator.userAgent) ) {
      $('#videoID').hide();
      $('#imageID').show();
     }

     else {
      $('#videoID').show();
      $('#imageID').hide();
     }
});

HTML

<body>
 <!--Try to support multiple formats. The best way to do this is to create
 different elements for each possible file type and dynamically swap them
 out by browser. There are other tutorials to help you do this-->

<video id="videoID" source="video.format" codecs="relevantCodec"></video>

<img src="img.format" id="imageID" />
</body>

CSS

#videoID{
    display:none;
}

#imageID{
    display:block;
}
Community
  • 1
  • 1
Paul Ferris
  • 346
  • 4
  • 16
0

You need to learn about responsive design. And yes, responsive design is mainly achieved with CSS and Jquery. Its the best way of doing it

Trinadh venna
  • 467
  • 3
  • 11