youtube红色播放按钮上的假播放按钮答案

【问题标题】：Fake play button over youtube red play buttonyoutube红色播放按钮上的假播放按钮
【发布时间】：2017-11-21 16:10:11
【问题描述】：

我的网站嵌入了黑白 youtube 预告片和经典电影节选。如何隐藏 youtube 红色按钮以与我的仿冒品一起播放，比如黑色、灰色或银色/金属色？请记住，我不想删除红色按钮，只是用我的假按钮隐藏它，所以当我点击我的假按钮时，实际上我点击了红色按钮。看不到的主要目的是不要丑化我的网站，这在风格上完全是黑白的。 ...而且，还有一些非常重要的事情——如果你可以避免使用 youtube API，因为它会减慢我的网站速度。谢谢！！！

【问题讨论】：

hope this information helps you, similar post
Is it possible to hide youtube's big red play button with a parameter?的可能重复
感谢 Foo Bar 的快速响应，我知道那篇文章，但它对我帮助不大......

标签： css overlay

【解决方案1】：

您不能替换原来的按钮，但有一种解决方法。我必须感谢@TomDoodler this answer。所以：

隐藏播放器

按照here 的描述获取缩略图，并将其放在您的页面中与播放器相同的位置和大小

将您自己的播放图标放在缩略图上

点击播放图标后，隐藏缩略图和播放图标，显示播放器并使用链接中的 YouTube API 开始播放视频

这是fiddle 给这个
// fiddles have to be accompanied by code, so here's some code

【讨论】：

谢谢，托拜厄斯！但是我们可以避免使用 youtube API，这里可以使用一些纯 css 技巧吗？
@ЯворЗарков 我认为这是不可能的，因为您必须使用player.playVideo(); 播放视频，而使用 CSS 则无法做到这一点。
好吧，我会继续我们这里的内容......谢谢，Tobias！
很高兴我能帮上忙。不要忘记将问题标记为已回答；）
好策略...我还建议您在显示自定义“播放”图标之前在缩略图上显示某种“加载”图标，否则用户可能会点击“播放”在通过 YouTube API 实际加载视频之前