0

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.

Bodhi1
  • 149
  • 10
  • 2
    "I designed a page with a full screen background html5 video" - please, no. – Dai Nov 26 '17 at 20:05
  • I agree it's usually a bad idea/web2.0 vomit, but it works really well with this design. The video is subtle and the page is very minimal. It's not a content page, only an interim holding page while the full site is being built so it needs to be a bit more visually interesting. – Bodhi1 Nov 26 '17 at 20:14
  • Possible duplicate of [Image placeholder fallback for HTML5 Video](https://stackoverflow.com/questions/14616453/image-placeholder-fallback-for-html5-video) – Olian04 Nov 26 '17 at 20:19
  • Unfortunately it's a different issue. The browser can render the video, it just renders it on top of everything else, ignoring z index. I can confirm that having a fallback jpg for unsupported video tag doesn't solve the issue. – Bodhi1 Nov 26 '17 at 20:40

1 Answers1

1

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

Olian04
  • 6,480
  • 2
  • 27
  • 54
shahabvshahabi
  • 937
  • 2
  • 7
  • 18
  • Sorry, I should have mentioned that I already had CSS attributes for the video element. I edited my post to clarify that. – Bodhi1 Nov 26 '17 at 20:53
  • sorry but still your question is not undrestandle for me can you put a image of your dreamy web page??? – shahabvshahabi Nov 26 '17 at 21:52