Html 如何为Youtube嵌入式播放器创建自定义框架？

我正在开发一个网站，我想在其中显示youtube上的视频（使用YT提供的嵌入式播放器），修改播放器外部的框架

更具体地说，我想创建一个电视img，在其中，我想显示我的视频，而不是电视屏幕

我试图从photoshop中创建一张取消屏幕的照片，但在HTML中，如果我选择该img作为背景div照片，或使用z索引将其插入为，我无法单击视频的“播放”按钮，因为它被“电视”div覆盖。

---

有什么帮助吗？

你可以将你的图像分割成上/左/右/下部分，然后将它们放在youtube视频周围（覆盖youtube播放器的边缘）

HTML:

<>我也有一个例子，你可以在画框中间画画框。

---

唯一需要注意的是，您需要使用固定的高度、宽度和绝对位置。

这是一个html代码，您可以插入YT视频

<div id="TV">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
    <div id="playButton">play<div>
</div>

#TV{position:absolute;width:500px;height:300px;}
#top{position:absolute;top:0;width:500px;height:20px;background-color:red;}
#left{position:absolute;top:0;left:0;width:20px;height:300px;background-color:red;}
#right{position:absolute;top:0;right:0;width:20px;height:300px;background-color:red;}
#bottom{position:absolute;bottom:0;width:500px;height:20px;background-color:red;}
#playButton{height:100px;width:100px;border-radius:100px;background-color:yellow;left: 200px;position: absolute;top: 90px;}
#playButton:hover{background-color:red;}