CSS: Inserting a drop shadow by bringing a div over an iframe
I would like to get the effect of a shaded iframe by its parent div.
Html
<div>
<iframe width="560" height="315" src="//www.youtube.com/embed/zdOmNiXvM3w?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
CSS
div {
box-shadow:
inset 0px 11px 8px -10px black,
inset 0px -11px 8px -10px black;
}
This is what I got so far, but the iframe seems to take precedence regardless of the z-index usage in the CSS. I used Youtube iframe in this example, but this solution should also work with standard iframes like one to google. It is ideal to use only CSS / HTML.
source to share
The IFrame will always be above its parent's shadow. To counter this problem, you can assign a box-shadow to a pseudo-element placed absolutely inside the parent element and make it immune to pointer events:
div {
position: relative;
}
div iframe {
display: block;
position: relative;
z-index: 1;
}
div::before {
background-color: rgba(255,255,255,.5); // Added only to show overlay, can be removed
content: '';
position: absolute;
z-index: 2;
box-shadow: inset 0px 11px 8px -10px black, inset 0px -11px 8px -10px black;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
I added a slightly transparent white background to show the overlay. You can always delete it. See the fiddle concept here: http://jsfiddle.net/teddyrised/uva5zkrg/
source to share