固定在div内的视频

我正在尝试制作带有固定背景视频的网站。但我希望背景视频只能在一个div内，并且在此视频上方，我会写一些其他内容。我试过，但没有奏效：/固定在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

来源

2014-08-31 Ahmed S. Mashaly

当你说“inside one div only”时，你指的是它在“header”div里面，还有其他一些东西（但不在其他div里面）或者在它自己的div里面？ – leigero 2014-08-31 04:48:25

确切地说，我希望它在标题 – 2014-08-31 04:51:13

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 */ 
}

Okey，我试过这个，并且工作了4个我，这个想法是！我制作了固定标题，并且始终处于内容背后。所以你必须为你的网站上的每个div设置背景，因为如果你没有设置背景，视频将显示为背景，这不是很好，请相信我☺☺

如果有人知道更好的答案，请把它写下来，如果任何人能够接受我的答案，并使其他人更容易，我根本没有问题。有一个愉快的一天;）

来源

2014-08-31 22:50:29

我看到你使用Bootstrap，有时可以是一个d * ck ;-)在索姆情况下，它更容易构建自己的div和css。也就是说，尝试将视频包装到自己的容器中，并将其放在要在视频顶部显示的文字上方。然后你必须在你的css中设置相对位置，然后你可以将你的内容放在视频的顶部，margin设置为-xxx px。你需要花费一点时间才能让它居中，并应用你所期望的响应速度。（注意：当您调整窗口大小时，文本不会保持居中，您必须设置自己的响应设置，或者当您将其包装在引导程序容器中时，它会执行此操作它为你，虽然我的经验，在容器中心的容器时，引导不帮助你那么多

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 
}

试试这个，并玩你自己想要的设置:)

祝你好运！

来源

2014-09-01 09:21:46 Jorn

不完全是，这不是我的意思..视频不固定我想向下滚动，而视频仍然在位，但当我到达第二个div它消失..只是像那样..复制我的答案，看看它是如何工作的，如果你可以改进它..是yes bootstrap是一个家伙，但仍然有助于许多事情：D – 2014-09-02 01:35:26

固定在div内的视频

回答

相关问题