如何添加包含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的插入框阴影？

回答

相关问题