CODEWITHSUNDEEP
javascriptcsshtml
Bodhi1
Bodhi1

Reputation: 149

How to detect incompatible browser for html5 background video and display image instead?

I designed a page with a full screen background html5 video, with form elements overlayed in the page body. Chrome and firefox, along with their mobile counterparts all correctly play the video in the background.

However, I tried another mobile browser (xiaomi web browser) and it loads the webm video on top of everything, full screen... blocking everything else on the page and making it unusable. Basically the worst case scenario.

I want to be very clear, the browser supports the video tag, thus the poster attribute or nesting an image in the video element have no effect. The problem isn't that the video doesn't load, it's that it loads on top of everything else meaning there doesn't seem to be a clear way to deal with this kind of incompatible display issue. Hopefully there is some workaround which will allow users of browsers which pop video elements out of the page to still use the site.

Is there any way I can either force the video in the background on less compatible browsers, or detect the page elements are not visible and kill the video or use a background image instead? 

video#bgvid {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1000;
  background: url(images/particles.jpg) no-repeat;
  background-size: cover;
}
<video poster="images/particles.jpg" id="bgvid" playsinline autoplay muted loop>
   <source src="images/particles.webm" type="video/webm">
   <source src="images/particles.mp4" type="video/mp4">
   <img alt="particles" src="images/particles.jpg" width="640" height="360" title="No video playback capabilities" />
</video>

Note: The browser is videotag webm compatible, the video plays. However, it plays over everything else. Unfortunately that means using the standard fallback code to load an image if the video can't load doesn't have any effect.

Upvotes: 0

Views: 274

Answers (1)

shahabvshahabi
shahabvshahabi

Reputation: 955

hello dear im not sure but maybe it works with a little of css like below :

.fullScreen {
  height: 100vh;
  background-color: lightblue;
  color: "red";
}
<div class="fullScreen">
   <video poster="images/particles.jpg" id="bgvid" playsinline autoplay muted loop>
   <source src="images/particles.webm" type="video/webm">
   <source src="images/particles.mp4" type="video/mp4">
   </video>
</div>

but i'm saying "im not sure" but it is not bad to test it

Upvotes: 1

Related Questions