Question

有没有办法将背景视频放在具有视差效果的div容器中？我正在寻找的是与此模板类似的东西：

Click here to see example

我尝试了一些我在互联网上找到的流行插件，例如：

BigVideo.js

YTPlayer

jquery.videoBG

但他们都没有做我正在寻找的事情，也许他们没有做但我无法理解:(

谢谢大家!!

Answer 1

有一个插件可以完全满足您的需求：https://github.com/linnett/backgroundVideo

Answer 2

我首先使用HTML5视频创建div元素，然后创建视差滚动。添加HTML5视频并使其全宽可以如下所示：

<video id="myVideo" controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Your browser does not support the video element.
</video>
<script>
   document.getElementById("myVideo").width=document.body.offsetWidth;
</script>

对于视差，您需要单独实施。带有HTML5视频的div元素将只是页面的一个组件，就像任何其他图层或内容部分一样。

如果你需要一些关于创建视差网站的教程，我的公司创建了一个可用的视差网站列表（按技术排序：jQuery，stellar.js和skrollr.js）。 http://potentpages.com/parallax-tutorials/

HTML5视频的Mozilla参考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Answer 3

以防您仍在寻找使用 YTPlayer 的解决方案。在HTML构造函数中设置containment:'self'或containment:'#elementID'，其中#elementID是您要在其中播放视频的div，section或视差区域的ID背景

请参阅 YTPlayer Wiki页面here。

<div id="P1" class="player" 
     data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}">
</div>

具有视差效果的背景视频

3 个答案: