固定在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內的視頻

回答

相關問題