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

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

【问题讨论】:

标签: css overlay


【解决方案1】:

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

  1. 隐藏播放器
  2. 按照here 的描述获取缩略图,并将其放在您的页面中与播放器相同的位置和大小
  3. 将您自己的播放图标放在缩略图上
  4. 点击播放图标后,隐藏缩略图和播放图标,显示播放器并使用链接中的 YouTube API 开始播放视频

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

【讨论】:

  • 谢谢,托拜厄斯!但是我们可以避免使用 youtube API,这里可以使用一些纯 css 技巧吗?
  • @ЯворЗарков 我认为这是不可能的,因为您必须使用player.playVideo(); 播放视频,而使用 CSS 则无法做到这一点。
  • 好吧,我会继续我们这里的内容......谢谢,Tobias!
  • 很高兴我能帮上忙。不要忘记将问题标记为已回答;)
  • 好策略...我还建议您在显示自定义“播放”图标之前在缩略图上显示某种“加载”图标,否则用户可能会点击“播放”在通过 YouTube API 实际加载视频之前
猜你喜欢
  • 2015-05-30
  • 2014-12-01
  • 2017-04-21
  • 1970-01-01
  • 2013-12-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-05-04
相关资源
最近更新 更多