Question

我正在尝试让我的视频填满整个可视屏幕。我希望能够看到我的网站何时加载的是视频和位于视频底部的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);
}

我怎样才能做到这一点？

Answer 1

使用提供的内容我相信我能够实现您的要求。我在这里创建了一个JS.Fiddle，其中包含我添加的更改：http://jsfiddle.net/fq3hynkg/

所做的一些更改包括将#logo div移至#video div。我还将此添加到您的#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;
}

一个建议，不要将ID用于类名（有意义的地方）使用普通的类名调用。例如.logo而不是#logo，这样您就可以避免任何ID混淆，并在需要时重复使用您的代码。您可以阅读更多about it here。

强制视频填充整个可视屏幕

1 个答案: