如何添加包含youtube iframe的div的插入框陰影？

我需要使用CSS box-shadow: inset將內部陰影添加到包含來自YouTube的iframe的div。我可以改變內部節點的結構，編號爲widget，但不在外面。如何添加包含youtube iframe的div的插入框陰影？

可能嗎？
你能否提供一個例子？

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

來源

2017-02-27 Radex

您可以添加使用:after的容器僞元素，並把它放在視頻的頂部，添加陰影，並添加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>

編輯：我知道的Internet Explorer的舊版本有超過YouTube視頻元素的問題一點點，解決它?wmode=transparent GET參數添加到YouTube的iframe網址。

來源

2017-02-27 13:56:22

我唯一遇到的問題是，當視頻加載時，圓角片刻消失。你有這個毛刺的解決方案？謝謝 – Radex

你可以通過添加border-radius：50px來修復它。到僞元素。它是50px，因爲外半徑是100px，邊框寬度是50px，所以100-50 = 50px; （我更新了上面的演示） –

如何添加包含youtube iframe的div的插入框陰影？

回答

相關問題