Myujth

In React, I have a parent component and a child component. The parent shows an iframe, returning this jsx:

<div className=cx("col-md-6", classes.BWrapper)>
 <iframe className=classes.Iframe width="100%" src="https://www.youtube.com/embed/OVoFzu-vH4o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 </div>

Then the child component handles some asynchornous code and while doing that it changes the state to loading and showing a spinner

return (
 <div className=globalStyles.Card>
 <div className=cx("card-header", globalStyles.CardHeader)>
 <ul className="nav nav-tabs card-header-tabs">
 formTypesJsx
 </ul>
 </div>
 <div className="card-body">
 <div className="tab-content">
 <div role="tabpanel" className="tab-panel" id="signup-form">

 this.props.loading && (<div><Backdrop show/><Spinner/></div>)

I guess it's not ideal to show a spinner in the child component that is supposed to cover in gray the elements of the parent, but I set the spinner elements with z-index and it's working fine except the iframe window is still appearing on top of the spinner.

Spinner css:

.Center 
 position: fixed;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 200;

I tried different stuff including giving the spinner z-index: -1 , opacity: .99 and also tried to give the iframe an absolute positioning and a higher z-index than the spinner, and giving the spinner relative position

Is there something I'm missing? Why is only the iframe appearing on top of the spinner?

Thanks in advance