Bootstrap 4 - Модальная перезагрузка видео - PullRequest
Новая
       6

Bootstrap 4 - Модальная перезагрузка видео

0 голосов
/ 03 января 2019

Я использую Bootstrap для создания галереи портфолио, и по щелчку появляется модал и воспроизводится видео.У меня будет серия видео в этой галерее, и поэтому у каждого модала будет уникальный # id.

Я запустил модалы и запустил правильное видео для указанного модала.Однако когда я закрываю модальное и снова открываю этот модальный, другое видео воспроизводится с другого модального.Вот пример ниже:

#Modal1 - это видео о спорте.#Modal2 это видео о погоде.Когда пользователь нажимает #Modal1, спортивное видео попадает в модальное пространство.Когда пользователь нажимает #Modal2, заполняется видео Погода.Однако, когда пользователь закрывает #Modal2 и открывает его снова, заполняется видео о спорте.Я проверил это, добавив другие модалы, и они все заполняются #Modal1 после того, как они были закрыты.

Кроме того, я уверен, что мог бы сжать JavaScript, чтобы функционировать более плавно, но яочень зеленый дев.Мой опыт в Motion Design, а не в Dev. Я мог бы помочь! 

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();
})
.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="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="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>

1 Ответ

0 голосов
/ 03 января 2019

Я пытался использовать классы вместо 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>
...