Using CSS to create an inset shadow by overlaying a div on top of an iframe

My goal is to create a shadow effect for an iframe element using its parent div element.

Here's the HTML:

<div>
    <iframe width="560" height="315" src="//www.youtube.com/embed/zdOmNiXvM3w?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

And here's the CSS:

div {
    box-shadow: 
    inset 0px 11px 8px -10px black,
    inset 0px -11px 8px -10px black;
}

Although I have this code, the iframe seems to override the z-index in CSS. I used a Youtube iframe as an example, but I need this solution to also work with standard iframes like one linking to Google. Preferably, this would be achieved using only CSS/HTML.

htmliframecss

Answer №1

To address the issue of the iframe always appearing above its parent's box-shadow, a solution is to create a pseudo-element within the parent element with a non-responsive pointer events property:

div {
    position: relative;
}
div iframe {
    display: block;
    position: relative;
    z-index: 1;
}
div::before {
    background-color: rgba(255,255,255,.5); // Included for overlay visualization, optional
    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;
}

A transparent white background has been added for visual purposes, and can be removed as needed. For a demonstration, refer to this fiddle: http://jsfiddle.net/teddyrised/uva5zkrg/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Nivo slider's position is being adjusted

I've been trying to adjust the width of the Nivo slider on my blog. Right now, it's taking up the entire width of the page wrapper and I want to add some space on the left and right sides so that it's centered and lines up with the navigatio ...

css

Tips for creating space between flex elements in Bootstrap without disrupting the layout breakpoints

<div class="row"> <div class="col-sm-6" style="margin-right: 1px;">CONTENT</div> <div class="col-sm-6"> CONTENT</div> </div> When adding a margin to the first element, it causes th ...

htmlcssflexboxbootstrap-5

When utilizing gridView, the ExecuteReader method will throw an error if the CommandText property has not been

I am encountering an issue with populating a gridView using the ExecuteReader function in my program. Every time I run it, I receive an error message stating "ExecuteReader : CommandText property has not been initialized". aspx.cs private void LoadGr ...

c#htmlcssasp.net

The run() function in AngularJS inside an IFrame does not execute again when the IFrame is reloaded

In my webpage, there is a "Start Portal" button and an iframe with the id: MyFrame. Both elements are on the same webpage. I use jQuery AJAX to fetch the URL of my AngularJS based portal and then set this URL as the src for the iframe. The code snippet be ...

javascripthtmlangularjsiframe

Select a number from an input box using Selenium in Python

Having trouble getting Selenium to select an option for me. I attempted the following: phone = Select(driver.find_element(By.NAME, "PhoneCountry")) phone.select_by_data-value(self, US) Unfortunately, it did not work as expected. Here is the HTM ...

pythonhtmlseleniumselenium-webdriverselect

Require assistance in adjusting a personalized dropdown menu and updating the selected value

I have created a unique custom dropdown feature as shown below: view image description here Upon selecting an option from the list, the main value will update and a label will float above it. view image description here $(".custom-dropdown-main").clic ...

htmljquerycss

HTML modal windows are a great way to show

I have a table in an HTML document that is populated with information from JSON. Within one of the cells, I'd like to insert a link that will open a modal window. The current setup functions correctly; however, I would like the modal window to displ ...

javascripthtmlangularjs

Tips on accessing a child attribute value such as id when clicking with jQuery

Whenever I click on a specific li element, I want to retrieve the id of that particular li instead of its parent. Currently, when clicking on a child li, both the parent and current ids are being displayed. I only need the current li id. I am seeking assi ...

jqueryhtml

Observing changes in the dimensions of flex children using MutationObserver

Considering the following structure of the Document Object Model... <div id="outer-container"> <div class="side-panel"><div width="200px"/></div> <div id="content"><!-- some content --></div> <div class=" ...

htmlcssflexboxmutation-observers

The issue with loading scripts in a ReactJS NextJS app is related to the inline condition not working

I'm having trouble with an inline condition for loading scripts. The condition seems to be working because the tag is displaying text, but when it comes to scripts, it doesn't work. How can I resolve this issue? const cookie = new Cookies().get ...

javascripthtmlreactjstypescriptnext.js

Adjust the color quantity based on the item that is being hovered over

I have a unique challenge at hand: <table> <tr> <td class="order-delivered"><i>order</i><br/><i>delivered</i><br/> <a class="check-mark">✔</a& ...

htmlcsshover

What is the best way to assign unique values to separate sets of radio buttons?

In my application, I have a list of animals with two sets of radio buttons for each animal- one for extinct (y or n) and the other for habitat (land or water). If the user selects "y" for extinct, the habitat radio buttons are disabled. If they select "n" ...

angularjshtml

Is Angular ViewChild behaving oddly?

@import '../../main-styles.scss'; .note-card-container { position: relative; background: white; border-radius: 5px; box-shadow: 0px 2px 15px 2px rgba(black, 0.068); transition: box-shadow 0.2s ease-out; margin-top: 35px; &:hover ...

htmlangulartypescriptviewchild

What is the reason behind fullPage.js only displaying the first page while hiding all others?

My website development is currently hindered by an issue with fullPage js. Only the first page is visible when using fullPage js, even though the links are properly set up on the dev site. As a result, I have to disable fullpage in order to make any progre ...

javascriptjqueryhtmlfullpage.js

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

phpcssmarkdown

Setting a background image at 50% opacity on a container-fluid: What you need to know

Just to clarify, I'm not looking for someone to solve this problem for me. I've been trying to figure it out on my own but haven't had any luck. I've searched for similar solutions online, but none of them have worked for what I need sp ...

csstwitter-bootstrapbootstrap-4

Utilize a combination of min-height percentages and pixels on a single div element

Currently searching for a method to explain min-height: 500px; min-height: 100%; the reason behind my decision to utilize this? The div must be either 100% in size or larger to allow for overflow. The height should only be set to 500px when the screen i ...

css

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

Here is the structured list that I am currently working with: function convert( name_ref ) { name_ref = name_ref + " > ol > li"; var mylist = []; $(name_ref).each(function () { if ($(this).find('> ol > li').length){ myl ...

javascriptjqueryhtmljson

The close() function in HTML <dialog> element has no effect

I have implemented a feature where confirmation <dialog>s are attached to forms that require them using the following code: const forms = document.querySelectorAll("form[data-confirm]"); forms.forEach((form) => { const confirm = docume ...

javascripthtml

Setting the height of a Bootstrap radio button

My Bootstrap radio buttons are set to a width of 200px. However, when the text inside the button exceeds this width, it wraps onto two lines leading to changes in button height. How can I ensure that all other buttons displayed scale to the same height? h ...

cssradio-buttonbootstrap-5