Question

我一直试图在Bootstraps Modal Popup中的iframe中播放嵌入的youtube视频。

YouTube视频根本没有加载。我尝试了一些在这里找到的解决方案，但无法使其正常工作。

在模式1中，我试图直接在Bootstraps模式中加载youtube。它不起作用。什么都不显示。

在模式2中，我尝试通过jquery调用以Bootstraps模式加载youtube。它不起作用。什么都不显示。

下面是代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>




<!--You Tube Modal 1 starts below-->

<div class="container">
  <h2>Youtube Video</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Load Youtube Video in Modal 1</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal1" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Youtube Video 1</h4>
        </div>
        <div class="modal-body">
          <p><iframe  width="420" height="315" src="https://www.youtube.com/watch?v=xv6l1vOUZTg"></iframe></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>



<!--You Tube Modal 1 ends-->




<!--You Tube Modal 2 starts below-->


<style type="text/css">
    .modal-content iframe{
        margin: 0 auto;
        display: block;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    var url = $("#yVideo").attr('src');

    $("#myModal").on('hide.bs.modal', function(){
        $("#yVideo").attr('src', '');
    });

    $("#myModal").on('show.bs.modal', function(){
        $("#yVideo").attr('src', url);
    });
});
</script>


<div class="bs-example">

    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Load Youtube Video in Modal 2</a>

    <!-- Modal HTML -->
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">YouTube Video modal 2</h4>
                </div>
                <div class="modal-body">
                    <iframe id="yVideo" width="560" height="315" src="https://www.youtube.com/watch?v=xv6l1vOUZTg" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>     



<!--You Tube Modal 2 Ends-->



</body>
</html>

Answer 1

我已经解决了这个问题。问题是如何将YouTube视频网址嵌入到iframe中

最初，我错误地提供了这样的网址

https://www.youtube.com/ 观看？v = hiHpzhyG6x4

但是在下面使用嵌入的链接格式可以解决此问题，并且视频现在正在播放。

https://www.youtube.com/ 嵌入 / hiHpzhyG6x4

谢谢

在引导程序模式弹出窗口中使用或不使用jquery调用时，youtube视频无法加载

1 个答案: