为 Youtube 视频添加自定义播放按钮
Posted
技术标签:
【中文标题】为 Youtube 视频添加自定义播放按钮【英文标题】：Adding a custom play button for Youtube video 【发布时间】：2021-05-06 14:33:28 【问题描述】：我为 Youtube 视频使用弹出窗口。因此，我使用“yotubevid”类。 我的 html 代码如下所示：
<a class="youtubevideo" href="https://youtu.be/">
<img class="youtubevideo-poster" src="example.com/image.png" ></a>
这个类和 div 在后台触发一个弹出窗口。而且效果很好。如何在不破坏此类结构的情况下添加自定义播放按钮？
【问题讨论】：
自定义播放按钮是什么意思？你想阻止自动播放吗？ 嵌入式 youtube 视频的专用播放按钮。比如像这样：codepen.io/rooc/pen/bONbqw 但是现有的解决方案不符合类结构，禁用弹窗。因此，我想在不破坏上面 html 代码的类的情况下添加一个播放按钮。 需要您的代码示例来调试和寻找解决方案 【参考方案1】：我认为这正是您所需要的……！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.playBtn
width: 2em;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
vertical-align: middle;
z-index:1;
a
display: flex;
justify-content: center;
align-items: center;
position: absolute;
</style>
<body>
<a class="youtubevideo" href="https://www.youtube.com/">
<img class="playBtn" src="https://www.pngitem.com/pimgs/b/255-2554901_recording-icon-png.png" >
<img class="youtubevideo-poster" src="https://picsum.photos/200/300" >
</a>
</body>
</html>【讨论】：
好的，谢谢！它可以工作，但似乎有一个小问题。页面正在中断。这通常发生在我的页面上，当 html 标记未正确关闭时。播放按钮的html标签有问题吗？ 我找到了导致问题的原因。 .a 的样式 css 不适合我的网站。我刚刚删除了“.a”的样式文件。现在它工作正常。感谢您的代码。以上是关于为 Youtube 视频添加自定义播放按钮的主要内容，如果未能解决你的问题，请参考以下文章
html YouTube视频自定义暂停播放按钮，从给定时间开始
YouTube JS API 自定义播放器跳过/下一个视频功能