jquery - 播放前隐藏 YouTube 视频嵌入图像

标签 jquery html iframe youtube-api

我正在制作一个网站,我想嵌入一个 YouTube 视频。我的前辈讨厌 YouTube 的普通播放器布局,所以我对其进行了一些自定义(没有按钮等)。问题是,当我打开网站页面时,YouTube 会显示一张图片(播放器大小,在我的例子中是 480p),而该图片确实被破坏了。

我需要一些方法来获取 YouTube 嵌入代码并在其上放置一张图片。当我点击图片时,它应该会变成 YouTube,然后自动开始播放视频。这样我就可以避免人们在打开页面时看到丑陋的预览图像。

谢谢。

最佳答案

将带有图像的 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);
    });

对我来说就像一个魅力。

关于jquery - 播放前隐藏 YouTube 视频嵌入图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12707244/

相关文章:

javascript - 如何禁用查看源代码和检查元素

php - 显示以下用户帖子

javascript - 在 div 元素中更新 Momentjs FromNow()

javascript - jquery 有效电子邮件检查

html - "display: table"和 "float:left"不考虑边距

javascript - Fancybox 2 beforeLoad 和 afterClose 在事件时不触发隐藏/显示 div

javascript - 如何删除 Stripe 的 iframe?

javascript - 加载内部内容后调整大小 'iframe'

javascript - jquery - 定义加载效果仅出现一次

javascript - jQuery 不适用于 Materialise CSS 中的导航栏