Question

我具有以下嵌入式YouTube iframe（示例内容）：

<iframe src="https://www.youtube.com/embed/h6tAKvJt8LE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

然后我在此iframe周围包裹一个div，以便我的javascript（此处未显示）可以将此视频加载到模式中，并在用户单击vma_overlay div时播放：

<div class="vma_overlay" data-toggle="modal" data-target="#vma_ModalBox">
<iframe src="https://www.youtube.com/embed/h6tAKvJt8LE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

到目前为止，一切都很好。它按预期工作。

但是，当我将bootraps嵌入响应型和响应项类全部添加到响应型中时，iframe就会消失：

<div class="embed-responsive embed-responsive-16by9">
                    <div class="vma_overlay" data-toggle="modal" data-target="#vma_ModalBox">
                        <iframe class="embed-responsive-item"
                              src="https://www.youtube.com/embed/h6tAKvJt8LE"
                                frameborder="0"
                                allow="autoplay; encrypted-media"
                                allowfullscreen></iframe>
                        </div>
                    </div>
                </div>

这是我的CSS：

.vma_width {
    width: 560px;
    height: 315px;
}

.vma_sizer {
    width: 560px;
    height: 315px;
}

.vma_overlay {
    position: relative;
    cursor: pointer;
    width: inherit;
}

    .vma_overlay:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        transition: all 200ms ease-in;
        opacity: 0;
    }

    .vma_overlay:hover:before {
        background: #000;
        opacity: 0.3;
    }

.modal-dialog {
    max-width: 70%;
    margin: 30px auto;
}

.modal-body {
    position: relative;
    padding: 0px;
}

.vma_close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

.modal-backdrop {
    opacity: 0.5 !important;
    background: #000 !important;
}

我不知道为什么以及如何解决这个问题。

这里是一个示例，如您所见，iframe没有出现：https://codepen.io/CodeChaos/pen/BGNbMo

添加嵌入响应类会使iframe消失

0 个答案: