将 Youtube 视频制作为全高和全宽封面视频答案

【问题标题】：Make a Youtube video a full height and width cover video将 Youtube 视频制作为全高和全宽封面视频
【发布时间】：2014-12-06 21:29:34
【问题描述】：

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

最好的方法是什么？

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

【问题讨论】：

标签： html css youtube

【解决方案1】：

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

另外，如果你想了解一些概念，请查看源代码：https://code.google.com/p/jquery-tubular/source/browse/trunk/js/jquery.tubular.1.0.js

【讨论】：

【解决方案2】：

如果你想使用YT播放器，我推荐你使用Youtube Player API

请记住，您可以将播放器设置为全背景大小，但不能在播放器内拉伸视频（因此您需要接受与视频原始比例不同的屏幕比例的黑色条纹）。我推荐你使用html5视频播放器（也许video.js可以帮助你）

P.S.：@Besto 的建议 Tubular 违反了 Youtube 的服务条款！

【讨论】：

【解决方案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>

【讨论】：

如果你想隐藏视频顶部和底部的条形，你可以通过将#fullyt top设置为负上边距来移除顶部，然后使其大于必要的像素数窗户。