Question

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

Answer 1

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

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

Service.Add()

这是HTML

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();
});

希望有帮助

Answer 2

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

 <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>

HTML全宽视频标题

2 个答案: