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 GET参数添加到youtube iframe网址。

如何在包含youtube iframe的div中添加带有插入的box-shadow？

1 个答案: