Radex Radex -4 years ago 149
CSS Question

How to add a box-shadow with inset to a div containing a youtube iframe?

I need to add a inner shadow using CSS

box-shadow: inset
to a div which contains an iframe from YouTube.
I can change the structure for the dom inside node with id
widget
but not outside.


  • Is it possible?

  • Could you provide me an example?





* {
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 Source

You can add a pseudo element using :after for the container and put it on top of the video, add the shadow and add pointer-events: none; to make it inexistent for the mouse interacting with the video.

* {
    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>

EDIT: I know old versions of internet explorer have a little bit of problems with elements over a youtube video, to fix it add the ?wmode=transparent GET parameter to the youtube iframe url.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download