Bootstrap 4-模态视频重载

Question

我正在使用Bootstrap创建作品集图库，并在单击时弹出一个模式并播放视频。我将在此画廊中看到一系列视频，因此每个模式都将具有唯一的#id。

我启动并运行了模态，并且为指定模态打开了正确的视频。但是，当我关闭模态并重新打开该模态时，会播放与另一个模态不同的视频。下面是一个示例：

let p = entry.price * 1.10837;是有关“体育”的视频。 entry.price = entry.price * 1.10837;是有关天气的视频。当用户单击#Modal1时，体育视频将填充到模式中。当用户单击#Modal2时，将填充“天气”视频。但是，当用户关闭#Modal1并将其重新打开时，将填充有关Sports的视频。我已经通过添加其他模态对它进行了测试，并且在关闭它们后，它们全部用#Modal2重新填充。

此外，我敢肯定，我可以将JavaScript压缩为更流畅地运行，但是我是一个非常绿色的开发者。我的专长是运动设计，而不是开发。。我可以寻求帮助！

#Modal2

#Modal1

function stopVideo() {
  var $frame = $('iframe#nofocusvideo');

  // saves the current iframe source
  var vidsrc = $frame.attr('src');

  // sets the source to nothing, stopping the video
  $frame.attr('src', '');

  // sets it back to the correct link so that it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
}

$('#portfolioModal1').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal2').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal3').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal4').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal5').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal6').on('hidden.bs.modal', function(e) {
  stopVideo();
})

Answer 1

我尝试使用类而不是id，我注意到您有两个 iframes和相同的id这是不应该发生的，我想这是将视频源的值设置为找到的脚本id的第一个实例的值；更改此设置后，它似乎实际上可以按预期运行。可能需要进一步澄清；但是我认为这是正确的选择。

function stopVideo() {
  var $frame = this.$('iframe.nofocusvideo');

  // saves the current iframe source
  var vidsrc = $frame.attr('src');

  // sets the source to nothing, stopping the video
  $frame.attr('src', '');

  // sets it back to the correct link so that it reloads immediately on the next window open
  $frame.attr('src', vidsrc);
}

$('#portfolioModal1').on('hidden.bs.modal', function(e) {
  $('#portfolioModal1 iframe').attr("src", $("#portfolioModal1 iframe").attr("src"));
  stopVideo();
})

$('#portfolioModal2').on('hidden.bs.modal', function(e) {
  $('#portfolioModal2 iframe').attr("src", $("#portfolioModal2 iframe").attr("src"));
  stopVideo();
})

$('#portfolioModal3').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal4').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal5').on('hidden.bs.modal', function(e) {
  stopVideo();
})

$('#portfolioModal6').on('hidden.bs.modal', function(e) {
  stopVideo();
})

.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto;
}


/**** Portfolio GIF Rollover States ****/

.project-rollover1 {
  background-image: url("../img/portfolio/thumbnails/01-reel.gif");
  background-size: cover;
}

.project-rollover2 {
  background-image: url("../img/portfolio/thumbnails/02-jg-wentworth.gif");
  background-size: cover;
}

.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio-modal {
  padding-right: 0px !important;
}

.portfolio-modal .modal-dialog {
  margin: 1rem;
  max-width: 100vw;
}

.portfolio-modal .modal-content {
  padding: 100px 0;
  background-image: url("../img/patterns/debut_light.png");
}

.portfolio-modal .modal-content h2 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333333;
}

.portfolio-modal .modal-content p {
  margin: 10px 0 20px;
  font-size: 16px;
}

.portfolio-modal .modal-content p.item-intro {
  font-size: 16px;
  font-style: italic;
  margin: 10px 0 20px;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.portfolio-modal .modal-content ul.list-inline {
  margin-top: 0;
  margin-bottom: 30px;
}

.portfolio-modal .modal-content img {
  margin-bottom: 30px;
}

.portfolio-modal .modal-content button {
  cursor: pointer;
}

.portfolio-modal .close-modal {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 75px;
  height: 75px;
  cursor: pointer;
  background-color: transparent;
}

.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}

.portfolio-modal .close-modal .lr {
  /* Safari and Chrome */
  z-index: 1051;
  width: 1px;
  height: 75px;
  margin-left: 35px;
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background-color: #212529;
}

.portfolio-modal .close-modal .lr .rl {
  /* Safari and Chrome */
  z-index: 1052;
  width: 1px;
  height: 75px;
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: #212529;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
HTML
<!-- Portfolio Grid -->
<section class="p-0 bg-light" id="portfolio">
  <div class="container-fluid p-0">
    <div class="row no-gutters">
      <!-- Project 1 -->
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" data-toggle="modal" href="#portfolioModal1">
          Project1
          <div class="portfolio-box-caption project-rollover1">
          </div>
        </a>
      </div>
      <!-- Project 2 -->
      <div class="col-lg-4 col-sm-6">
        <a class="portfolio-box" data-toggle="modal" href="#portfolioModal2">
          Project2
          <div class="portfolio-box-caption project-rollover2">
          </div>
        </a>
      </div>
    </div>
  </div>
</section>


<!-- Portfolio Modals -->

<!-- Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="modal-body">
              <!-- Project Details Go Here -->
              <h2 class="text-uppercase">2018 Reel</h2>
              <div class="container">
                <div class="row">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="nofocusvideo" class="nofocusvideo embed-responsive-item" src="https://player.vimeo.com/video/250633785" allowfullscreen></iframe>
                  </div>
                </div>
              </div>
              <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae,
                nostrum, reiciendis facere nemo!</p>
              <ul class="list-inline">
                <li>Date: Mid 2018</li>
                <li>Client: Austin Bonelli</li>
                <li>Category: 2D Animation</li>
              </ul>
              <button class="btn btn-primary-pink" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i>
                                Close Project
                              </button>

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

<!-- Modal 2 -->
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="close-modal" data-dismiss="modal">
        <div class="lr">
          <div class="rl"></div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-lg-8 mx-auto">
            <div class="modal-body">
              <!-- Project Details Go Here -->
              <h2 class="text-uppercase">JG Wentworth</h2>
              <div class="container">
                <div class="row">
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe id="nofocusvideo" class="nofocusvideo2 embed-responsive-item" src="https://player.vimeo.com/video/202987459" allowfullscreen></iframe>
                  </div>
                </div>
              </div>
              <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae,
                nostrum, reiciendis facere nemo!</p>
              <ul class="list-inline">
                <li>Date: Mid 2018</li>
                <li>Client: Austin Bonelli</li>
                <li>Category: 2D Animation</li>
              </ul>
              <button class="btn btn-primary-pink" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i>
                                Close Project
                              </button>

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