title: Video fullscreen background with mobile device
body: <p>I have a problem with my site. I'm new here on Stack Over but I read all the posts about my problem without finding the solution. This is my link <a href="http://www.likealittledisaster.com/" rel="nofollow">Like a little disaster</a></p>
  
  <p>Click on "like a little disaster" to enter to my web site.</p>
  
  <p>In summary, my problem is this: my site works well on all browsers from the screen. If you resize the browser window, the web site fits perfectly.
  It does not work on the browser installed on smartphones, like Chrome or Mozilla, or Safari. The video tag has the attribute poster. Small screen smartphone is all white and remains a long scroll horizontally and vertically.</p>
  
  <p>For convenience reporting my html code and my css code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;video preload="auto" autoplay loop="loop" poster="&lt;?php bloginfo('template_url'); ?&gt;/images/homapage.jpg" id="bgvid"&gt;
      &lt;source src="&lt;?php bloginfo('template_url'); ?&gt;/video/sito2.webmhd.webm" type="video/webm" /&gt;
      &lt;source src="&lt;?php bloginfo('template_url'); ?&gt;/video/sito2.mp4.mp4" type="video/mp4" /&gt;
      &lt;source src="&lt;?php bloginfo('template_url'); ?&gt;/video/sito2.ogg" type="video/ogg ogv" codecs="theora, vorbis" /&gt;
  
      &lt;object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="aaa" align="middle"&gt;
          &lt;param name="allowScriptAccess" value="sameDomain" /&gt;
          &lt;param name="allowFullScreen" value="false" /&gt;
          &lt;param name="movie" value="&lt;?php bloginfo('template_url'); ?&gt;/video/aaa.swf" /&gt;
          &lt;param name="quality" value="high" /&gt;
          &lt;param name="scale" value="exactfit" /&gt;
          &lt;param name="wmode" value="transparent" /&gt;
          &lt;param name="bgcolor" value="#ffffff" /&gt;
          &lt;embed src="&lt;?php bloginfo('template_url'); ?&gt;/video/aaa.swf" quality="high" scale="exactfit" wmode="transparent" bgcolor="#ffffff" width="100%" height="100%" name="aaa" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_it" /&gt;
      &lt;/object&gt;
  &lt;/video&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>video#bgvid { 
      position: fixed; right: 0; bottom: 0;
      min-width: 100%; min-height: 100%;
      width: auto; height: auto; z-index: -100; 
      background: url(images/homapage.jpg) no-repeat;
      background-size: cover; 
      z-index: 0;
  }
  
  video { display: block; }
  </code></pre>