如何在包含YouTube iframe的div中添加内部投影(box-shadow with inset)？

Question

如何在包含YouTube iframe的div中添加内部投影(box-shadow with inset)？

3

我需要使用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>

- Radex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonas Grumann · Accepted Answer

您可以使用: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 URL中。