Question

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

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

我试图从photoshop取消屏幕创建照片，但是，在HTML中，如果我选择img作为background-div照片或将其插入＆lt; img src =“”/＆gt;，使用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;}

我也有一个这样的例子，你可以在画布中画出“帧”图像。 Here

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

Answer 2

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

 <iframe src="https://www.youtube.com/embed/5L3wKniOnro?autoplay=1" width="600" height="400" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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

2 个答案: