为 Youtube 视频添加自定义播放按钮答案

【问题标题】：Adding a custom play button for Youtube video为 Youtube 视频添加自定义播放按钮
【发布时间】：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" width="100%" height="auto"></a>

这个类和 div 在后台触发一个弹出窗口。而且效果很好。如何在不破坏此类结构的情况下添加自定义播放按钮？

【问题讨论】：

自定义播放按钮是什么意思？你想阻止自动播放吗？
嵌入式 youtube 视频的专用播放按钮。比如像这样：codepen.io/rooc/pen/bONbqw 但是现有的解决方案不符合类结构，禁用弹窗。因此，我想在不破坏上面 html 代码的类的情况下添加一个播放按钮。
需要您的代码示例来调试和寻找解决方案

标签： javascript html jquery iframe youtube

【解决方案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" alt="">
            <img class="youtubevideo-poster" src="https://picsum.photos/200/300" width="100vw" height="auto">
        </a>
        
</body>

</html>

【讨论】：

好的，谢谢！它可以工作，但似乎有一个小问题。页面正在中断。这通常发生在我的页面上，当 html 标记未正确关闭时。播放按钮的html标签有问题吗？
我找到了导致问题的原因。 .a 的样式 css 不适合我的网站。我刚刚删除了“.a”的样式文件。现在它工作正常。感谢您的代码。