HTML全宽视频标题
HTML全宽视频标题
提问于 2016-12-14 12:38:31
如何制作像这样的全宽视频标题：http://mazwai.com/#/？视频只在顶部，但你可以向下滚动过去？我看过很多这样的视频教程：http://thenewcode.com/samples/polina.html，但你不能在这里滚动视频(即使有内容超过视频)-视频总是背景。如何创建第一个示例？有什么教程吗？我很难找到一个好的。
回答 2
Stack Overflow用户
发布于 2019-07-15 17:51:44
我使用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>希望能有所帮助
Stack Overflow用户
发布于 2016-12-14 13:06:09
对于全宽背景视频，您可以在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41134961
复制相关文章
相似问题