Question

我为 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 在后台触发一个弹出窗口。它运作良好。如何在不破坏此类结构的情况下添加自定义播放按钮？

Answer 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>

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

1 个答案: