CODEWITHSUNDEEP
htmlvideo
ed_laika
ed_laika

Reputation: 77

HTML Background video for mobile size?

So I have a problem with my website. When ever I start it as a desktop version of it it opens the video as it suppose to: https://edgaraxe.net/teamhusky/

Here is the code for the video:

<div class="background-wrap">
   <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
      <source src="video/husky.mp4" type="video/mp4">
      Video not supported
   </video>
</div>

However if I open it for mobile version I get a black screen.

Is here any way to make the mobile version open the video? Because I looked for a solution and people say its not supported to play videos on phone. So instead is there a way to open a image instead for the mobile version?

Upvotes: 3

Views: 883

Answers (3)

Anish Silwal
Anish Silwal

Reputation: 186

Add a parameter poster to your video tag like this:

<video .... poster="PATH_TO_IMAGE" autoplay="false">
    ....
</video>

Upvotes: 3

Renan Caldas
Renan Caldas

Reputation: 56

You can use multiple video formats in order to run the video on multiple browsers (including mobile ones). So, try adding a .webm video:

<div class="background-wrap">
   <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
      <source src="video/husky.mp4" type="video/mp4">
      <source src="video/husky.webm" type="video/webm">
      Video not supported
   </video>
</div>

Upvotes: 1

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

<video /> tag has poster attribute which will be displayed on devices which support video element, but does not support autoplay.

<video poster="URL_TO_IMAGE" id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
    <source src="video/husky.mp4" type="video/mp4">
    Video not supported
  </video>

Upvotes: 2

Related Questions