如何将带有插图的框阴影添加到包含 youtube iframe 的 div？

Question

我需要使用 CSSbox-shadow: inset向包含来自 YouTube 的 iframe 的 div添加内部阴影。我可以使用 idwidget但不能在外部更改 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;以使其不存在于鼠标与视频交互。

* {
    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=transparentGET 参数添加到 youtube iframe url。