Форсируйте видео, чтобы заполнить весь экран, который можно просмотреть

-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 в div #video. Я также добавил это к вашему #video DIV:

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

Измененный свой #logo DIV.

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

Одно предложение, не используйте идентификаторы для имен классов (где это имеет смысл) используют обычные вызовы имен классов. Например, .logo вместо #logo таким образом вы избежите путаницы ID и повторно используете свой код там, где это необходимо. Вы можете прочитать больше about it here.

источник

2015-01-20 21:08:21 crazymatt

Форсируйте видео, чтобы заполнить весь экран, который можно просмотреть

ответ

Смежные вопросы