时间戳

首页 > 解决方案 > 我想在单击图像时以模态显示嵌入视频。我在嵌入时使用了正确的语法，但它仍然无法正常工作

html - 我想在单击图像时以模态显示嵌入视频。我在嵌入时使用了正确的语法，但它仍然无法正常工作

问题描述

<!--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 视频根本没有响应。所以我添加了嵌入响应，但视频仍然没有出现在模态中。

标签： htmlcsstwitter-bootstrapiframe

解决方案

问题是modal-body你拥有的地方除了宽度之外iframe没有任何东西。不足以显示视频。所以只需添加添加到.widthpadding-left:15px; padding-right:15px30pxw-100width:100%.modal-body

w-100课程在 BS4 中工作，不太确定 BS3。.modal-body { width: 100% }但是如果课程不起作用，您可以添加 css

注意：由于（我猜）Stackoverflow 的安全性，视频没有出现在下面的片段中，但你可以在这里看到它-> jsFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4 col-xs-12" id="audi">
    <a href="#" class="d-block" data-toggle="modal" data-target="#modalaudi">
    <img src="image\a12.jpg"  alt="Audition" class="img-fluid mx-auto d-block">
  </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 type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   <!-- Modal body -->
        <div class="modal-body mx-auto w-100">
<div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vnoKLLui7JA" allowfullscreen></iframe>
         </div>
    </div>
</div>
</div>

推荐阅读