Изменение z-индекса iframe на YouTube

Question

В React у меня есть родительский компонент и дочерний компонент.Родитель отображает iframe, возвращая этот 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>

Затем дочерний компонент обрабатывает некоторый асинхронный код и при этом изменяет состояние на загрузку и отображение счетчика

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>)}

Я предполагаю, что не идеально показывать счетчик в дочернем компоненте, который должен покрывать серым цветом элементы родительского элемента, но я установил элементы счетчика с z-index, и он работает нормально, за исключением того, что окно iframe все еще появляется сверхуspinner.

Spinner css:

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

Я пробовал разные вещи, включая предоставление z-index счетчика: -1, непрозрачность: .99, а также пытался дать iframe абсолютное позиционированиеи более высокий z-индекс, чем у прядильщика, и дает относительное положение прядильщика

Чего-то мне не хватает?Почему только верхняя часть фрейма появляется на вершине вертушки?

Заранее спасибо