使用引導刪除HMTL5視頻嵌入的寬度（使其100％）

嘗試了幾個選項後，我設法在主頁中嵌入視頻（就像在airbnb中一樣）。現在我無法彌補視頻和瀏覽器邊緣出現的小差距。檢查safari和chrome中的間隙寬度。使用引導刪除HMTL5視頻嵌入的寬度（使其100％）

  <!DOCTYPE div PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
      <html> 
      <head> 
       <meta charset="UTF-8"> 
       <title>World wonders</title> 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
       <style type="text/css"> 
       h3{ 
        color: #3cbc8d; 
        z-index: 1; 
        text-align: center; 
        margin-right: auto; 
        margin-left: auto; 
        margin-top: 10%; 
        border: 3px solid #ffffff; 
        padding: 10px; 
        border-radius: 15px; 
        width: 700px; 
        letter-spacing: 3px; 
        font-size: 25px; 
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
       } 
       .header-container{ 
        width:100%; 
        height:478px; 
        border-left:none; 
        border-right:none; 
        position: relative; 
        padding: 20px; 
        border:1px solid redred; 
        background-color:black; 
        z-index: -2;   
       } 

       .video-container{ 
        position: absolute; 
        top: 0; 
        left: 0; 
        height: 100%; 
        width:100%; 
        overflow: hidden; 
        border:1px solid red; 
        background-color:black; 
        z-index: -2;   
       } 

       video{ 
        position: absolute; 
        z-index: -1; 
        opacity: 0.98; 
        width: 100%; 
        border:1px solid blue; 
       } 
       </style> 
      </head> 
      <body> 
       <div class="header-container"> 
        <div class="video-container embed-responsive embed-responsive-16by9"> 
         <video class="embed-responsive-item" preload="true" autoplay="autoplay" loop="" volume="0" muted poster="pic.jpg"> 
          <source src="../media/bbb.mp4" type="video/mp4"> 
          <source src="../media/bbb.webm" type="video/webm"> 
          <source src="../media/bbb.ogv" type="video/ogg"> 
         </video> 
        </div> 
        <h3>Welcome to the world of wonders</h3> 
       </div> <!-- header container div--> 
      </body> 
      </html>

如何確保視頻在所有瀏覽器中保持全寬？

來源

2015-09-03 user4826347

附上代碼。 –

HTML代碼與問題一起添加。它對你是否可見？ – user4826347

好吧，我想我知道你想要什麼。 –

在.header-container的左側和右側放置一個填充。 padding-left:20px; padding-right:20px;。看看fiddle。如果您希望文本保留在頂部，請移除位置：絕對位置h3，並將其更改爲相對位置。

來源

2015-09-03 15:55:05

讓我知道，如果這是你所要求的。 –

我試過你的解決方案，但是我發現頂部有一個空白區域。我需要避免頂部和兩側（寬度）的空隙，但高度需要調整。 – user4826347

你的意思是頂部的黑色位？ –

使用引導刪除HMTL5視頻嵌入的寬度（使其100％）

回答

相關問題