Question

我试图在我的网站上制作html5背景视频。但我对IE和谷歌Chrome有一些问题..我已经制作了实例HERE 任何人都可以告诉我我的视频有什么问题我在谷歌浏览器中发现它是黑屏，而不是在IE中工作 CSS：

<section class="container-1140" id="mast" style="height: 775px;">

        <div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1">

            <div id="mast_inner-2">

                <video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true">

                    <source src="video/video.mp4"></source>
                    <source src="video/video.webmhd.webm"></source>
                    <img src="video/poster.jpg">

                </video>

            </div>

                </div>

    </section>

HTML是：

<section class="container-1140" id="mast" style="height: 775px;">

        <div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1">

            <div id="mast_inner-2">

                <video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true">

                    <source src="video/video.mp4"></source>
                    <source src="video/video.webmhd.webm"></source>
                    <img src="video/poster.jpg">

                </video>

            </div>

                </div>

    </section>

Answer 1

您可以只使用CSS，这适用于大多数浏览器

#video_background {
position: fixed;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 100;
overflow: hidden;

}

Answer 2

您可以使用此plugin。它很简单，它可以解决你的任务。

Answer 3

z index应为-100，以使其成为chrome中的背景视频

Answer 4

您需要{* 1}}您要在后台设置的视频。试试这个

http://jsfiddle.net/bfvopg6p/

html5背景视频全屏

4 个答案: