初始全屏视频，无条

Question

我想使用一个视频标签来填充整个窗口centerd，而不考虑长宽比，并将所有其他内容下推到视频标签/容器的下方。

在调整窗口大小时，视频应相应地调整大小。

我尝试了相对和绝对定位的各种方法和组合，但没有一种方法能产生这种效果。我确实找到了一个这样做的网站；

http://wearefetch.com/

但我还没弄明白他们是怎么做到的。

谢谢

Answer 1

根据他们的网站：

  <div class="video-wrap" style="width: 1251px; height: 1111px;">
    <meta content="Fetch">
    <meta content="Fetch video">
    <meta content="http://wearefetch.com/wp-content/uploads/2013/09/shutterstock_197472794.jpg"><video autoplay="" class="slider-video" height="700" loop="" preload="auto" style="visibility: visible; width: 2010px; height: 1131px;" width="1800">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.webm" type="video/webm">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.mp4" type="video/mp4">
    <source src="./wp-content/uploads/2013/09/FetchFinalHeader.ogg" type="video/ogg"></video>
  </div>

其中video-wrap宽度和高度由javascript在调整窗口大小时计算。

Answer 2

是的，你应该在调整窗口大小时计算宽度和高度。我可以分享下面的代码片段(对不起，这不是最佳代码)。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        var fullVideo = {
            init: function () {
                this.count();
                this.handlers();
            },
            count: function () {
                var parentWidth = $(window).outerWidth();
                var parentHeight = $(window).outerHeight();
                $(this.wrapClass + "," + this.videoClass).css({
                    width: parentWidth + "px",
                    height: parentHeight + "px"
                });
            },
            handlers: function () {
                window.onresize = function (even) {
                    fullVideo.count();
                };
            },
            wrapClass: ".main-wrap",
            videoClass: ".video-wrap"
        };

    </script>

    <style type="text/css">
        body {
            margin: 0;
        }

        .main-wrap {
            position: relative;
            background: rgba(0, 0, 0, 1);
        }

        .video-wrap {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 300px;

        }

        .other-wrap {
            height: 500px;
            background: green;
        }
    </style>
</head>

<body onload="fullVideo.init()">
<div class="main-wrap">
    <video class="video-wrap" poster="http://media.w3.org/2010/05/sintel/poster.png"
           mediagroup="myVideoGroup" preload="none">
        <source id="mp4" type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4"></source>
        <source id="webm" type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm"></source>
        <source id="ogv" type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv"></source>
        <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

<div class="other-wrap"></div>
Other content
</body>

</html>