ビデオiFrameをスタイルする方法は？

Question

iFrameに埋め込まれたビデオコントロールのスタイルを設定して、ブラウザのコントロールスタイルを持たないようにしたいと思います。私は検索し、適切な答えを得ることができませんでした。私はJavaScriptやCSS、または私を助けることができるリンクを通してこれをどのように達成できるか誰にも知らせてください。私はYouTubeのようないくつかのサイトでは、ビデオプレーヤーがスタイルされていることがわかります。

Answer 1

通常のドキュメントと同じように、コンテンツにlinkまたはstyle要素を追加することで、CSSをiframeに追加する必要があります。

問題をよりよく解決するもう1つのアプローチは、shadow DOMです。次のJavascriptコードは、このテクニックをどのように使用できるかを示しています。

var host = document.createElement("div"); 
var shadow = host.createShadowRoot(); 

var video = document.createElement("video"); 

// ... set video.src, etc. 

var style = document.createElement("style"); 

// set the styling of your video element, e.g.: 
style.innerHTML = "video { border: 5px solid red; }"; 

shadow.appendChild(style); 
shadow.appendChild(video); 

// insert the host of the shadow root to the document, e.g.: 
document.body.appendChild(host); 

定義したスタイリングは、シャドールートの内部のHTMLにのみ適用されるため、残りの書類がスタイルされることはありません。 JSFiddle demo.