Question

我试图建立一个固定背景视频的网站。但是我希望背景视频只在一个div中，在这个视频上面我会写一些其他东西。我尝试了这个，但没有工作：/

HTML代码：

<body>
        <div class="header">

            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="holder span12 text-center">
                        <p><span>somthing</span> here</p>
                        <p id="p1">- this website is designed by bla bla bla -</p>
                    </div> <!--End holder class-->
                </div><!--End row class-->
            </div><!--End container class-->

            <video id="bgvideo" autoplay loop poster="imgs/main_img.jpg">

                    <source src="videos/main.mp4" type="video/mp4">

            </video><!--End video tag-->

        </div> <!--End header-->

        <div class="service">
            <div class="container-fluid">
                <div class="row-fluid text-center">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, impedit, fugit. Nisi laboriosam rem optio unde. Saepe harum iusto, provident atque similique nulla dolore ad, sint esse asperiores enim eligendi.</p>

                    <p>Laborum magnam dolorem perferendis, ut, aut maxime. Quia dolores, sequi id architecto ea incidunt magni, enim maiores provident suscipit repellat voluptate possimus! Deserunt, quisquam non! Harum a architecto, quas tempora.</p>

                    <p>Ut nemo eligendi consequuntur reprehenderit cupiditate eveniet eos odit ducimus molestiae vitae, maxime ullam, praesentium dolores labore fuga alias eum hic ipsa similique voluptates repellendus. Aliquam facilis, cum fugiat tempora.</p>

                </div><!--End row-->
            </div><!--End container-->
        </div><!--End service-->
</body><!--End body-->

CSS代码：

.header{
    position: fixed;
    min-width: 100%;
    min-height: 100%;
}

#bgvideo{
    min-width: 100%;
    min-height: 100%;
    position: relative;
    top: 0;
    left: 0;
}

.holder{
    position: absolute;
    z-index: 3;
    font-size: 250%;
    line-height: 1;
    margin-top: 300px;
    color: #fff;
    font-family: lucidahand;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 1);
}

.service{
   position: absolute;
   top: 1000px;
}

Js fiddle of current code.
如果你不了解我！这个网站包含我想要的相同想法

http://designingmedia.com/html/vizerk/HTML/index-one-video-with-slider-content.html

谢谢：D

Answer 1

HTML代码：

    <body>

    <div class="header">
        <video id="bgvideo" autoplay loop poster="imgs/main_img.jpg">
            <source src="videos/main.mp4" type="video/mp4">
        </video>
    </div>

    <div class="sitebody">

        <div class="firstdiv">
            <div class="container-fluid">
                <div class="row-fluid">

                    <p>bla bla bla</p>
                    <p>bla bla bla</p>
                    <p>bla bla bla</p>

                </div><!-- End row-->
            </div><!-- End container-->
        </div>

        <div class="seconddiv">
            <div class="container-fluid">
                <div class="row-fluid">

                    <p>bla bla bla</p>
                    <p>bla bla bla</p>
                    <p>bla bla bla</p>

                </div><!-- End row-->
            </div><!-- End container-->

            <div class="thirddiv">
            <div class="container-fluid">
                <div class="row-fluid">

                    <p>bla bla bla</p>
                    <p>bla bla bla</p>
                    <p>bla bla bla</p>

                </div><!-- End row-->
            </div><!-- End container-->

        </div><!-- End sitebody-->

</body>

CSS代码：

.header{
    width: 100%;
    position: fixed;
}

#bgvideo{
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index:-2;
}

.sitebody{/* this class to hold the content so u don't have to set position: absolute for each div or section in your website*/
    position: absolute; 
    width: 100%;
    text-align: center;
}

.firstdiv{
    margin-top: 900px;
    height: 800px;
    background-color: #fff;
}

.seconddiv{
    /* write whatever u want */
}

.thirdddiv{
    /* write whatever u want */
}

哦，我试过这个并且工作了4个我，这个想法是!!我制作了固定的标题，它一直在你的内容背后。所以你必须在你的网站下面为每个div设置背景，因为如果你没有设置背景，那么视频将显示为背景并且它不好看，相信我☺☺

如果有人知道一个更好的答案，请写下来，如果任何人能够接受我的答案并让其他人更容易，我完全没有问题。祝你有愉快的一天;）

Answer 2

我看到你正在使用Bootstrap，有时可能是d * ck ;-)在som情况下，它更容易构建自己的div和css。也就是说，尝试将视频包装到自己的容器中，并将其放在要在视频顶部显示的文本上方。然后，您必须在css中将位置设置为相对位置，然后您可以将内容置于视频顶部，并将边距设置为-xxx px。你可以稍微玩一下，让它居中并应用你想要的响应能力。

这是我如何做到的：（注意：当您调整窗口大小时，文本不会保持居中，您必须设置自己的响应设置，或者当您将其包装在引导容器中时它会为您执行此操作，尽管根据我的经验，bootstrap不会当容器集中在容器中时，＃39; t帮助你。

HTML：

<body>

    <div id="wrapper">

    <div id="bottom-layer">

        <video id="video" preload="auto" src="video/1.mp4"></video>

    </div>

    <div id="top-layer">
        <p>Your Text Here <br />
            Hover me!
        </p>
    </div>


</div>
</body>

CSS：

#bottom-layer {
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    background: gray;
    position: relative; /* this */
}
#video {
    margin-bottom: -4px;
}

#top-layer {
    max-width: 100%;
    max-height: inherit;
    position: relative; /* and this allows you to put the div on top of the video */
    margin-top: -640px;
    /*Hover Off*/
    -o-transition:1.0s;
    -ms-transition:1.0s;
    -moz-transition:1.0s;
    -webkit-transition:1.0s;
    transition:1.0s;
}
#top-layer:hover {
    /*Hover On*/
    background-color: rgba(255,255,255,0.6); 
    -o-transition:1.0s;
    -ms-transition:1.0s;
    -moz-transition:1.0s;
    -webkit-transition:1.0s;
    transition:1.0s;
}
#top-layer p{
    text-align: center;
    margin: auto;
    padding: 320px;
}

img,video,canvas {
    width: 100%; /* responsive images,video and canvas elements
}

尝试这个并使用您自己想要的设置：）

祝你好运！

视频固定在div内

2 个答案: