如何爲Youtube嵌入式播放器創建自定義框架？

我正在開發一個網站，我想在YouTube上播放視頻（使用YT提供的嵌入式播放器）修改播放器外部的框架。如何爲Youtube嵌入式播放器創建自定義框架？

更具體一點，我想創建一個電視img，而不是電視屏幕，我想顯示我的視頻。

我試着從photoshop創建一張照片取消屏幕，但是，然後，在HTML中，如果我選擇img作爲background-div照片或將其插入爲< img src =「」/>，請使用z-索引，我不能點擊我的視頻的「播放」按鈕，因爲它被「電視」div覆蓋。任何幫助？

來源

2013-11-14 panc_fab

您可以將您的圖像切片成頂/左/右/底部，並把它們周圍的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

唯一需要注意的是，您需要使用固定的高度和寬度以及絕對位置。

來源

2013-11-14 16:34:04

如何爲Youtube嵌入式播放器創建自定義框架？

回答

相關問題