YouTubeのiframeが含まれているdivにinset付きボックスシャドウを追加するにはどうすればよいですか？

Question

YouTubeのiframeを含むdivに、CSS box-shadow: insetを使って内側の影を追加する必要があります。 IDがwidgetで、外部ではないdom内部ノードの構造を変更できます。

• 可能でしょうか？
• 私に例を教えてください。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#widget { 
 
    position: absolute; 
 
    width: 640px; 
 
    height: 360px; 
 
    border-radius: 100px; 
 
    overflow: hidden; 
 
    background-color: red; 
 
    box-shadow: inset 50px 50px 25px #888888; 
 
    border: 50px solid blue; 
 
} 
 

 
#iframe {}

<div id="widget"> 
 
    <iframe id="iframe" width="100%" height="100%" src="https://www.youtube.com/embed/NWHfY_lvKIQ?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe> 
 
</div>

Answer 1

あなたは、コンテナの:afterを使用して擬似要素を追加し、動画の上にそれを置く、影を追加し、それがinexistentマウスとの対話のために作るためにpointer-events: none;を追加することができますビデオ。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#widget { 
 
    position: absolute; 
 
    width: 640px; 
 
    height: 360px; 
 
    border-radius: 100px; 
 
    overflow: hidden; 
 
    background-color: red; 
 
    border: 50px solid blue; 
 
} 
 

 
#widget:after { 
 
    content:""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 99; 
 
    box-shadow: inset 50px 50px 25px #888888; 
 
    pointer-events: none; 
 
    border-radius: 50px; 
 
}

<div id="widget"> 
 
     <iframe id="iframe" width="100%" height="100%" src="https://www.youtube.com/embed/NWHfY_lvKIQ?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe> 
 
    </div>

編集：私は、インターネットエクスプローラの古いバージョンでは、それがユーチューブはiframe URLへ?wmode=transparent GETパラメータを追加修正し、ユーチューブの動画を超える要素を持つ問題を少し知っています。