CODEWITHSUNDEEP
androidcsshtml
janlindso
janlindso

Reputation: 1239

HTML5 video background in Android showing black

I've made a website with a HTML5 video that has a poster attritube with a screenshot from the video. This is because of the smartphone issue where autoplay is not supported to prevent excessive use of mobile data. Therefore, it will show the screenshot instead of the video on mobile platform.

I have all the webpage contents in a div with id "content". Everything works just fine, except when the website has information that needs scrolling. If you remove the fixed position for the video, it works, but then of course the website is messed up, as the video must be set to fixed position so I can scroll down the page without the video moving along.

#video_background {
  position: fixed; 	
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden; 
}
    
#content { 	
  position: absolute; 	
  text-align: left; 	
  width: 100%; 	
  padding: 15px; 	
}
<video id="video_background" poster="images/video.jpg" preload="auto" loop="loop" muted="muted" autoplay="true" volume="0">  	
    <source src="webvid_4.mp4" type="video/mp4"> 
    Video not supported 
</video>
    
<div id="content"> 	
    // all information goes here. If too much for the screen, the background goes black.
</div>

If I reload the page, it shows the poster image for half a second and turns black.

Any tips on how to get this to work? Or maybe a workaround?

Upvotes: 2

Views: 6212

Answers (2)

janlindso
janlindso

Reputation: 1239

I simply ended up with two CSS-stylesheets; one for PC and one for handhelds (tablets, smartphones etc.).

<script language="javascript">
 var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
  if (mobile) {
   var $ = document; // shortcut
   var cssId = 'handheld';  
   if (!$.getElementById(cssId))
    {
      var head  = $.getElementsByTagName('head')[0];
      var link  = $.createElement('link');
      link.id   = cssId;
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = 'css/handheld.css'; // stylesheet
      link.media = 'all';
      head.appendChild(link);
     };
   }
   else{
    var $ = document; // shortcut
    var cssId = 'workstation'; 
    if (!$.getElementById(cssId))
     {
      var head  = $.getElementsByTagName('head')[0];
      var link  = $.createElement('link');
      link.id   = cssId;
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = 'css/workstation.css'; // stylesheet
      link.media = 'all';
      head.appendChild(link);
     };
   } 
</script>

Handheld.css:

body{
 background-image: url(/images/video.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 background-attachment: fixed;

 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;

 background-size: cover;
     }

div#video{
 visibility:hidden;
     }

Workstation.css:

div#video {
 visibility:visible;
}

Upvotes: 1

David J Roura S
David J Roura S

Reputation: 11

You can set a background if it is android like this:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.getElementById("content").innerHTML="";
}

So, if is it android you erase and let the background display

<div id="content" onmouseover="OutContainer();">
    <video id="video1" onmouseover="OutContainer();" preload="auto" loop="loop" muted="muted" autoplay="true" volume="0">
       <source src="mov_bbb.mp4" type="video/mp4">
       Your browser does not support HTML5 video.
    </video>
</div>

set both CSS content and video1 as this

#content
        {
            position: fixed; right: 0; bottom: 0;
            min-width: 100%; min-height: 100%;
            width: auto; height: auto; z-index: -100;
            background: url(background.jpg) no-repeat;
            background-size: cover;
        }

Upvotes: 1

Related Questions