在 Bootstrap 4 中从单个模式加载多个 youtube 视频答案

【问题标题】：Load multiple youtube videos from a single modal in Bootstrap 4在 Bootstrap 4 中从单个模式加载多个 youtube 视频
【发布时间】：2020-05-21 17:42:24
【问题描述】：

我有超过 50 个 youtube 视频要在静态页面上以模式显示。当然，每个模态都有一个单独的按钮。但是，我不想创建 50 种不同的模式。所以这就是我到目前为止得到的结果

演示：https://jsfiddle.net/b4a1ekyw/

HTML：

<div class="container">
         <h2>Modal Example</h2>
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 1" data-toggle="modal">Open Modal 1</button>
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button>
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal">Open Modal 3</button>
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button>
         <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</button>
         <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
               <div class="modal-content">
                  <div class="modal-header">
                     <h4 class="modal-title">Modal Header</h4>
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>
                  <div class="modal-body">

                  </div>
               </div>
            </div>
         </div>
      </div>

JS：

$(document).ready(function(e) {
    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: false,
    });
    $(document).on("click", ".modalButton", function() {
        var ClickedButton = $(this).data("name");
        $(".modal-body").html("<p>" + ClickedButton + "</p>");
        $('#myModal').modal('show');
    });

});

这是显示 youtube 视频的示例代码：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8" allowfullscreen></iframe>
</div>

data-name这个视频代码我不知道怎么调用。

【问题讨论】：

这是你想要的吗jsfiddle.net/jr1cbL3y
是的！请将其发布为答案。
你可以做的是有一个 AJAX 函数，它将视频 url 解析为你的模态，然后每个模态都有一个不同的 url，因此取决于单击哪个按钮，会显示不同的视频。这样一来，您只需要担心编码一个模态。

标签： javascript jquery twitter-bootstrap bootstrap-4

【解决方案1】：

你所要做的就是修改一下你的代码，所以插入：

$(".modal-body").html("<p>" + ClickedButton + "</p>");

使用这个：

$(".modal-body").html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/' + ClickedButton + '" allowfullscreen></iframe></div>');

完整代码

$(document).ready(function(e) {
  $('#myModal').modal({
    backdrop: 'static',
    keyboard: false,
    show: false,
  });
  $(document).on("click", ".modalButton", function() {
    var ClickedButton = $(this).data("name");
    $(".modal-body").html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/' + ClickedButton + '" allowfullscreen></iframe></div>');
    $('#myModal').modal('show');
  });

});

h2,
h4,
.btn,
.modal-body {
  font-size: 14px;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="container">
  <h2>Modal Example</h2>
  <button type="button" class="btn btn-info btn-lg modalButton" data-name="zpOULjyy-n8" data-toggle="modal">Open Modal 1</button>
  <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button>
  <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal">Open Modal 3</button>
  <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button>
  <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Modal Header</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：