HTML 全宽视频标题

Question

如何制作像这样的全宽视频标题：http://mazwai.com/#/？视频仅在顶部，但您可以向下滚动过去？我看过很多这样的视频教程：http://thenewcode.com/samples/polina.html 但你不能滚动到这里的视频（即使有内容超出了视频） - 视频始终是背景。我怎样才能做第一个例子？任何地方都有教程吗？我很难找到一个好的。

Answer 1

我使用jquery-background-video，效果很好

这是使视频窗口高度为 100 的代码

var $window = $(window);
var $video = $('.jquery-background-video-wrapper');
$(window).resize(function() {
    var height = $window.height();
    $video.css('height', height);
}).trigger('resize');
$(document).ready(function() {
    $('.jquery-background-video').bgVideo();
});

这里是 HTML

<div class="jquery-background-video-wrapper" style="background-image: url('https://xxxx.jpg')">
    <video class="jquery-background-video" autoplay muted loop poster="https://xxxx.jpg">
        <source src="https://xxxx.mp4" type="video/mp4">
    </video>
    <script>document.getElementById('video-home').style.height = window.innerHeight + 'px';</script>
    <div id="vido-scrollto"></div>
</div>

希望对你有帮助

Answer 2

对于全宽背景视频，您可以在 html5 中使用 data-bg-video="video path" 类。 下面是演示示例，只需插入您的数据背景视频路径。

 <section class="mbr-section mbr-section-hero mbr-section-full " id="header4-0" 
data-bg-video="https://www.youtube.com/watch?v=La5GyrphjK0">

        <div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(0, 0, 0);"></div>

        <div class="mbr-table-cell">

            <div class="container">
                <div class="row">
                    <div class="mbr-section col-md-10 col-md-offset-2 text-xs-right">

                        <h1 class="mbr-section-title display-1">VIDEO BACKGROUND</h1>
                        <p class="mbr-section-lead lead">Intro with background video and color overlay. Text and buttons are aligned to right. Mobirise helps you cut down development time by providing you with a flexible website editor with a drag and drop interface.</p>
                        <div class="mbr-section-btn"><a class="btn btn-lg btn-success" href="#">Demo Button</a> <a class="btn btn-lg btn-warning" href="#">Demo Button</a></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mbr-arrow mbr-arrow-floating" aria-hidden="true"><a href="#next"><i class="mbr-arrow-icon"></i></a></div>

    </section>