Question

<!--on clicking this image modal will open-->
<div class="col-sm-4 col-xs-12" id="audi">
    <a class="d-block" data-target="#modalaudi" data-toggle="modal" href="#"><img alt="Audition" class="img-fluid mx-auto d-block" src="image/a12.jpg"></a>
    <h4 style="text-align:center">Audition</h4>
</div><!--modal-->
<div class="modal fade" id="modalaudi">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title text-primary">AUDITION</h4><button class="close" data-dismiss="modal" type="button">&times;</button>
            </div><!-- Modal body -->
            <div class="modal-body mx-auto">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe allowfullscreen class="embed-responsive-item" src="https://www.youtube.com/embed/vnoKLLui7JA"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

首先，我将图像添加到col-sm-4的引导网格中。点击此图片后，应该会打开一个包含视频的模态，但是添加到iframe视频上根本没有响应。因此，我添加了嵌入响应式，但视频仍未出现在模式上。

Answer 1

问题是您拥有Number.isInteger(x)的{{1}}没有任何modal-body，除了iframe的宽度为width 。不足以显示视频。因此，只需添加类padding-left:15px; padding-right:15px，即可将30px添加到w-100。

width:100%类在BS4中工作，对BS3不确定。但是，如果该类不起作用，您可以添加css .modal-body

注意：由于（我想）Stackoverflow的安全性，该视频未出现在下面的代码段中，但您可以在此处看到它-> jsFiddle

w-100

我想在单击image时以模式显示嵌入视频。我在嵌入时使用了正确的语法，但仍然无法正常工作

1 个答案: