強制視頻以填充整個可視屏幕

-1

我試圖讓視頻填充整個可視屏幕。我希望能夠看到我的網站何時加載視頻和位於視頻底部的h1標籤 - （歡迎訪問網站）。強制視頻以填充整個可視屏幕

我有以下的HTML文檔的結構：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 
    </head> 
    <body> 
     <div id="logo"><img src="bdlogo.png" width="100%" height="100%" alt="Home"></a></div> 
     <div id="nav"></div> 
     <div id="videoclip"> 
      <video autoplay loop> 
       <source src="walking.mp4" type="video/mp4"> 
       <source src="walking.ogg" type="video/ogg"> 
       <source src="walking.mov" type="video/mov"> 
       <img src="frame1.png"/> 
       Your browser does not support the video tag. 
      </video> 
     </div> 
     <div id="opacity"> 
     <div id="space"></div> 
     <h1 class="low">welcome to website</h1> 
     </div> 
     <div id="content"><h1 class="low">content <span class="red">here<span></h1></div> 
    </body> 
</html>

在本文檔的<head>節我註冊以下CSS樣式：

#logo 
{ 
    position: fixed; 
    top: 10px; 
    left:50px; 
    width:140px; 
    height:50px; 
    background-image: url("paper.gif"); 
    z-index:3; 
} 

#opacity 
{ 
    width: 100%; 
    height:460px; 
    color: #fff; 
    opacity: 1.0; 
    filter: alpha(opacity=100); /* For IE8 and earlier */ 
    position: absolute: 
    top:225px;    
} 

#content 
{ 
    width: 100%; 
    height:800px; 
    background-color:white; 
    color: #black important!; 
} 

.low 
{ 
    border: 0 none; 
    display: inline-block; 
    font-size: 80px; 
    padding: 0 20px; 
    line-height: 100px; 
    margin-bottom: 0; 
    margin-top: 15px; 
    text-transform: uppercase; 
} 

h1{font-family: Arial, Helvetica, sans-serif;} 

#space 
{ 
    width:100%; 
    height:355px; 
} 

.red {color:red;} 

html, body 
{ 
    margin:0; 
    padding:0; 
} 

#nav 
{ 
    height:70px; 
    width:100%; 
    display: none; 
    position: fixed; 
    background-color:#fff; 
    z-index: 2; 
} 


video 
{ 
    width: 100% !important; 
    height: auto !important; 
    visibility:hidden; 
} 

#videoclip 
{ 
    position: fixed; 
    z-index: -1; 
}

而這一塊的Javascript代碼：

$(window).load(function(){ 
$(window).bind("scroll", function() { 
    if ($(this).scrollTop() > 50) { 
     $("#nav").fadeIn(); 
    } else { 
     $("#nav").stop().fadeOut(); 
    } 
}); 
});//]]> 

jQuery(document).ready(function(){ 
    /* stop the black video loading box */ 
    delayShow(); 
}); 

function delayShow() { 
    var secs = 400; 
    setTimeout('jQuery("video").css("visibility","visible");', secs); 
}

我該如何做到這一點？

來源

2015-01-20 Ed Wright

使用提供的內容我相信我能夠實現您的要求。我在這裏創建了一個JS.Fiddle，其中包含我添加的更改：http://jsfiddle.net/fq3hynkg/

其中一些更改包括將您的#logo div移動到#video div。我還添加了此信息#video DIV：

#videoclip { 
    width: 100%; 
    position: relative; 
}

改變了你的#logo股利。

#logo { 
    position: absolute; 
    bottom: 10px; 
    right: 50px; 
    width:140px; 
    height:50px; 
    background-image: url("paper.gif"); 
    z-index:3; 
}

一個建議，不要使用ID的類名稱（它有意義）使用普通的類名稱調用。例如.logo而不是#logo這樣，您將避免任何ID混淆，並在需要時重用您的代碼。你可以閱讀更多about it here。

來源

2015-01-20 21:08:21 crazymatt

強制視頻以填充整個可視屏幕

回答

相關問題