如何在包含YouTube iFrame的Div中添加带有插图的盒子阴影

Question

我需要使用CSS box-shadow: inset添加内部阴影到一个包含YouTube iframe的DIV。我可以使用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为容器添加伪元素，然后将其放在视频顶部，添加阴影并添加pointer-events: none;以使其与视频相互作用。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<。/p>

* {
    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添加到YouTube iframe url。