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

试试这个

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

Answer 2

我终于找到了解决方案。我在这里写链接是意大利语，但很容易理解。谢谢你们。 solution

视频全屏背景与移动设备

2 个答案: