2

プレーヤーの外側のフレームを変更して、(YT から提供される埋め込みプレーヤーを使用して) youtube のビデオを表示する Web サイトを開発しています。

より具体的には、テレビ画面の代わりにビデオを表示したいテレビ画像を作成したいと考えています。

画面をキャンセルして Photoshop から写真を作成しようとしましたが、HTML でその img を background-div 写真として選択するか、z-indexes を使用して < img src="" /> として挿入すると、できません私のビデオの「再生」ボタンをクリックしてください。これは、「テレビ」の div でカバーされているためです。何か助けて??

4

2 に答える 2

1

画像を上/左/右/下のセクションにスライスして、YouTube ビデオの周りに配置できます (YouTube プレーヤーの端をオーバーレイします)。

スライスされた画像の代わりに背景色を使用する jsfiddle をモックアップしました。

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

また、「フレーム」画像の中央にあるキャンバスに描画する、実際のこの例もあります。 ここ

唯一の注意点は、固定の高さと幅、および絶対位置を使用する必要があることです。

于 2013-11-14T16:34:04.873 に答える
0

これは、YT ビデオを挿入できるコード HTML です。

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

于 2021-05-09T15:41:53.070 に答える