隐藏的YouTube视频嵌入图像播放之前(Hide YouTube video embed imag

我在做一个网站，我想嵌入YouTube视频。 我讨厌高级YouTube的普通球员的布局，所以我定制了一点（没有按钮等）。 问题是，当我打开网站页面，YouTube上显示的图像（播放器的大小，在我的情况480P）和图像真正破坏。

我需要一些方法来拿起YouTube的嵌入代码，并有在它上面的一个形象。 当我点击图像，它应该改变到YouTube，然后自动开始播放视频。 这样我才能避免人们看到那个丑陋的预览图像时，他们打开网页。

谢谢。

Answer 1:

YouTube不会播放视频，如果它是隐藏的，所以你可以尝试自动播放设置为1，但具有DIV隐藏的，那么你可以使用jQuery来“交换”与视频封面。 视频将加载和自动播放。

用jQuery：

<div id="youtubeplayer" style="display:none;">
<!-- Player code with &autoplay=1 -->
</div>
<div id="coverimageforplayer"><img src="wherever.png" /></div>

<script type="text/javascript">
$('#coverimageforplayer').click(function() {
$('#coverimageforplayer').replaceWith($('#youtubeplayer').show());
});
</script>

Answer 2:

把一个div无论你想显示视频图像：

<div id="coverimageforplayer"><img class="introvideo" src="video-cover.jpg" width="800" height="450" /></div>

现在，添加下面的jQuery代码：

$('#coverimageforplayer').click(function() {
        var embedCode = '<iframe ...Your Youtube embed code></iframe>';
        $('#coverimageforplayer').html(embedCode);
    });

作品对我来说就像魅力。

Answer 3:

如果游客的比例很高永远不会真正开始播放，我建议你用的方法，你就必须去img在页面上标记（与任何自定义图像你想要的），直到有人点击其中一个，此时你换在YouTube的iframe中嵌入播放器。 这样你可以避免加载玩家提前除非你知道你真正需要它。

有一个在YouTube Direct可精简版的代码库这样做，包括覆盖在当鼠标移到它“玩”图标的一个例子。 你可以看到现场演示在

http://ytdirectlite.appspot.com/static-min/submit.html

如果您在该页面的底部登录提交界面，然后进入“我的YouTube视频”选项卡。

还有的，处理的代码了几件，但最相关的位

https://code.google.com/p/youtube-direct-lite/source/browse/static/js/ytdl/load.js#71 https://code.google.com/p/youtube-direct-lite /source/browse/static/js/ytdl/player.js#17

文章来源: Hide YouTube video embed image before playing