Видео полноэкранный фон с мобильным устройством

Question

У меня проблема с моим сайтом. Я новичок здесь в Stack Over, но я прочитал все сообщения о своей проблеме, не найдя решение. Это моя ссылка Like a little disaster

Нажмите «как небольшая катастрофа», чтобы войти на мой веб-сайт.

Итак, моя проблема заключается в следующем: мой сайт хорошо работает во всех браузерах с экрана. Если вы измените размер окна браузера, веб-сайт идеально подходит. Он не работает в браузере, установленном на смартфонах, например Chrome или Mozilla, или Safari. В теге видео есть атрибут плакат. Маленький экранный смартфон белого цвета и имеет длинную прокрутку по горизонтали и по вертикали.

Для удобства отчетности мой HTML-код и мой CSS код

<video preload="auto" autoplay loop="loop" poster="<?php bloginfo('template_url'); ?>/images/homapage.jpg" id="bgvid"> 
    <source src="<?php bloginfo('template_url'); ?>/video/sito2.webmhd.webm" type="video/webm" /> 
    <source src="<?php bloginfo('template_url'); ?>/video/sito2.mp4.mp4" type="video/mp4" /> 
    <source src="<?php bloginfo('template_url'); ?>/video/sito2.ogg" type="video/ogg ogv" codecs="theora, vorbis" /> 

    <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"> 
     <param name="allowScriptAccess" value="sameDomain" /> 
     <param name="allowFullScreen" value="false" /> 
     <param name="movie" value="<?php bloginfo('template_url'); ?>/video/aaa.swf" /> 
     <param name="quality" value="high" /> 
     <param name="scale" value="exactfit" /> 
     <param name="wmode" value="transparent" /> 
     <param name="bgcolor" value="#ffffff" /> 
     <embed src="<?php bloginfo('template_url'); ?>/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" /> 
    </object> 
</video> 

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; } 

Answer 1

я, наконец, нашел свое решение. Я пишу здесь. Ссылка на итальянском языке, но ее легко понять. Спасибо вам всем. solution

Answer 2

Попробуйте

video#bgvid { 
      position: fixed; 
      right: 0; 
      left: 0; 
      top: 0; 
      bottom: 0; 
      min-width: 100%; 
      /* min-height: 100%; */ 
      width:100%; 
      height: auto; 
      z-index: -100; 
      background: url(images/homapage.jpg) no-repeat; 
      background-size: cover; 
      z-index: 0; 
}