我想在模式下显示嵌入视频时，点击图像。我在嵌入上使用了正确的语法，它仍然不工作
我想在模式下显示嵌入视频时，点击图像。我在嵌入上使用了正确的语法，它仍然不工作
提问于 2018-07-17 23:02:38
<!--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">×</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>首先，我在bootstrap grid中添加镜像，即col 4。单击此图像时，应该会打开一个包含视频的模式，但添加到iframe视频上根本不会变得有响应。因此，我添加了嵌入响应式，但静止视频不会出现在模式。
回答 1
Stack Overflow用户
发布于 2018-07-17 23:12:01
问题是您的iframe所在的modal-body没有任何width，除了来自padding-left:15px; padding-right:15px的30px之外。不足以播放视频。所以只需添加w-100类，它会将width:100%添加到.modal-body中。
w-100类在BS4中工作，对BS3不是很确定。但是如果类不起作用，你可以添加css .modal-body { width: 100% }
注意:由于(我猜)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">×</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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51384690
复制相关文章
相似问题
腾讯云开发者
