Открытие YouTube видео в качестве модального в Django - PullRequest
0 голосов
/ 09 апреля 2020

Я пытаюсь воспроизвести встроенное видео YouTube как модальное в Django, когда пользователь нажимает ссылку на моем сайте. Однако я получаю сообщение об ошибке:

Page not found (404)
Request Method: GET
Request URL:    http://127.0.0.1:8000/students/undefined

Это то, что я пробовал

        <div class="media-body">
                            <i class="fa fa-fw fa-circle text-green-300"></i><a href="#" data-toggle="modal" class="video-btn img-fluid cursor-pointer" data-src="https://www.youtube.com/embed/<?= $row['fNk_zzaMoSs'] ?>" data-target="#myModal">Vectors and Spaces</a>
        </div>
..... 
    <div class="modal videomodal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" src="" id="video"  allowscriptaccess="always">></iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
....

<script type="text/javascript">
    $(document).ready(function() {
      var $videoSrc;
      $('.video-btn').click(function() {
          $videoSrc = $(this).data( "src" );
      });
      console.log($videoSrc);
      $('#myModal').on('shown.bs.modal', function (e) {
      $("#video").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1" );
      })
      $('#myModal').on('hide.bs.modal', function (e) {
          $("#video").attr('src',$videoSrc);
      })
    });
  </script>

и мой css

.videomodal .modal-dialog {
      max-width: 800px;
      margin: 30px auto;
  }
.videomodal .modal-body {
  position:relative;
  padding:0px;
}
.videomodal .close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}
.cursor-pointer{
    cursor: pointer;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...