再生ボタンを置換する

Question

私は現在、HTMLとCSSを学んでいますが、クラスの仕組みが不思議でした。だから私はそれの中にYoutube埋め込みビデオでHTMLでページを作った。その後、CSSを使用して、私はこれがローカル

bigplay.pngという名前の保存された画像で再生ボタンを変更することになったこの

.ytp-large-play-button-bg { 
    background:url("bigplay.png"); 
} 

を設定するしかし、それは同じ再生ボタンを残りました。誰かが私がここで間違っていると言うことができますか？

Answer 1

Youtubeはiframeとして埋め込まれています。つまり、親ページに配置されたCSSはコンテンツに伝播しません。私は前処理にPHPを使用した（以下を試みてきた

1. Clone the iframe content to add your own styling

2. Embed youtube without using an iframe

---

編集

オプション1を見ると：これは、次の2つの選択肢を残し配信前にiframeのコンテンツとCSSを挿入するページ）：https://www.tehplayground.com/Hjk19qDWeiwIWkKl

これを防止するために、いくつかのセキュリティプロセスが存在するようです。

あなたが言うようにCSSとHTMLを使い慣れていて、これを学習の練習として使用しているのなら、これは簡単なことではありません。基本的なエクササイズから始めることを強くお勧めします。

Answer 2

私はそれを調べて、これらのプロパティを変更しました。再生ボタンはsvgなので、あなたはそれを隠して、バックグラウンドプレイの画像で親を変える必要があります。もし私があなたが欲しいものを得たら。

button.ytp-large-play-button { 
    background: url(bgimagesomethpath); 
    height: value; 
    width: value; 
} 

button.ytp-large-play-button svg { 
     display: none; 
}