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

Question

我正在开发一个网站，我想在其中显示来自 youtube 的视频(使用 YT 提供的嵌入式播放器)修改播放器外的框架。

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

我试图通过取消屏幕的 photoshop 创建照片，但是在 HTML 中，如果我选择该 img 作为 background-div 照片或将其插入为 < img src=""/>，使用 z-indexes ，我无法点击视频的“播放”按钮，因为它被“电视”div 覆盖了。有帮助吗？？

Answer 1

您可以将您的图像分割成顶部/左侧/右侧/底部部分，并将它们放置在 youtube 视频周围(覆盖 youtube 播放器的边缘)

I've mocked up a jsfiddle that uses background-color instead of the sliced up images.

HTML:

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

CSS:

#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;}

我还有一个实际的例子，您可以在“框架”图像的中间在 Canvas 上绘图。 Here

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