Changing z-index of youtube iframe

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