Question

我想使用Youtube视频作为启动页面（包括声音）的全屏背景。但是应该没有控制，暂停的能力等等。它应该看起来像背景电影。

最好的方法是什么？

我应该使用标签还是有其他HTML5标签，或者我可以使用完全不同的方法？

Answer 1

如果您可以使用JS / jQuery：http://www.seanmccambridge.com/tubular/

另外，如果您想采用一些概念，请参阅来源：https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js

Answer 2

如果您想使用YT播放器，我建议您使用Youtube Player API

请注意，您可以使播放器具有全背景尺寸，但您无法在播放器内拉伸视频（因此您需要接受不同屏幕比例的黑色条纹，而不是视频的原始比例）。我建议你使用html5视频播放器（也许video.js可以帮助你）

P.S。：@ Besto的建议Tubular打破了Youtube的服务条款！

Answer 3

<div id="ytcon" style="overflow: hidden">
<iframe id="fullyt" src="//www.youtube.com/embed/QVr0M7WCBu4?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

<script>
$("#ytcon").height($(window).height());
$("#ytcon").width($(window).width());
$("#fullyt").height($(window).height());
$("#fullyt").width($(window).width());

$(window).on('resize', function(){
$("#ytcon").height($(window).height());
$("#ytcon").width($(window).width());
$("#fullyt").height($(window).height());
$("#fullyt").width($(window).width());
});

</script>

制作Youtube视频全高度和宽度封面视频

3 个答案: