Встроенное видео не открывается в модальном режиме - PullRequest
Новая
       68

Встроенное видео не открывается в модальном режиме

2 голосов
/ 21 октября 2019

Я пытаюсь открыть мое видео в модальном режиме. Я создаю кнопку, используя javascript, и по методу щелчка я хочу открыть модал со встроенным видео на YouTube, но получаю ошибку 404. В чем моя ошибка:

У меня есть идентификатор видео в моем json, и я оттуда вызываю идентификатор видео. Модал, содержащий таблицу, должен вызывать другой модал с видео на YouTube

Мой код:

HTML: 

<div class="modal" tabindex="-1" role="dialog" id="drilldown">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title pull-left"></h5>
                                        <div class="pull-right">

                                            <a class="close" data-dismiss="modal" aria-label="Close" style="cursor: pointer;">
                                                <span aria-hidden="true"><i class="fas fa-times"></i></span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="modal-body">
                                        <div class="spin-wrapper">
                                            <div class="spinner"></div>
                                        </div>
                                        <table id="table"  class="table table-sm table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Date</th>
                                                    <th>Name</th>
                                                    <th>Youtube</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal 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" allow="autoplay"></iframe>
                                        </div>


                                    </div>

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

JavaScript 

json.forEach(elem => {
elem.youtube = `<a class="vl" id="${elem.video_id}" data-toggle="modal" data-src="https://www.youtube.com/embed/${elem.video_id}?autoplay=1" data-target="#myModal"><i class="fab fa-youtube"></i></a>
 </a>`;
});

 let table = $('#table').DataTable({
        data: json,
        columns: [{
          data: 'date'
        }, {
          data: 'name'
        }, {
          data: 'youtube'
        }]
      });
});

let $videoSrc;
$('.vl').click(function() {
  console.log(this);
  $videoSrc = $(this).data("src");
  // console.log($videoSrc);
});

$('#myModal').on('shown.bs.modal', function(e) {

  $("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
})

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

Когда я нажимаю на модал, я получаю ошибку 404.

1 Ответ

1 голос
/ 21 октября 2019

Следующее будет работать, но вы не можете выполнить это здесь, потому что видео YouTube вызывают предупреждение о нескольких сайтах.

Файл cookie, связанный с ресурсом между сайтами в https://youtube.com/, былустанавливается без атрибута SameSite. В следующем выпуске Chrome файлы cookie с межсайтовыми запросами будут доставляться только в том случае, если для них заданы значения SameSite=None и Secure

. Я создал рабочую демонстрацию здесь: https://jsfiddle.net/MrPolywhirl/5xyetqw2/

let json = [{
  date: '2019-04-30',
  name: 'Stack Overflow for Teams - Q&A in a Private and Secure Environment',
  video_id: 'HJtJXMKpl2g'
}, {
  date: '2019-06-04',
  name: 'Stack Overflow Talent - The Best Way to Hire Developers',
  video_id: 'PMDmo4SaP1s'
}, {
  date: '2019-07-19',
  name: 'Stack Overflow for Teams - Share Knowledge & Drive Productivity',
  video_id: 'wmzBz5WSEls'
}];

var $videoSrc = null;

json.forEach(elem => {
  elem.youtube = $('<a>', { id: elem.video_id, class: 'video_link' })
    .attr('data-toggle', 'modal')
    .attr('data-src', `https://www.youtube.com/embed/${elem.video_id}`)
    .attr('data-target', '#video-modal')
    .append($('<i>').addClass('fab fa-youtube'))[0].outerHTML;
});

let table = $('#video-table').DataTable({
  data: json,
  columns: [{
    title: 'Date',
    data: 'date'
  }, {
    title: 'Title',
    data: 'name'
  }, {
    title: 'Link',
    data: 'youtube'
  }]
});

$('#toggle-modal-btn').on('click', function(e) {
  $('.modal').first().modal('toggle');
});

$('#toggle-modal-btn').trigger('click'); // Show the table modal

$('.video_link').click(function(e) {
  $videoSrc = $(this).data('src'); // Update the video source
});

$('#video-modal').on('shown.bs.modal', function(e) {
  $("#video-frame").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
});

$('#video-modal').on('hide.bs.modal', function(e) {
  $("#video-frame").attr('src', $videoSrc);
});
.video_link i {
  color: red;
  cursor: pointer;
}

#toggle-modal-btn {
  display: block;
  width: 8em;
  height: 2.5em;
  margin: 0 auto;
  margin-top: calc(50vh - 2.5em);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<button id="toggle-modal-btn">Show Modal</button>
<div class="modal" tabindex="-1" role="dialog" id="drilldown">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title pull-left"></h5>
        <div class="pull-right">
          <a class="close" data-dismiss="modal" aria-label="Close" style="cursor: pointer;">
            <span aria-hidden="true"><i class="fas fa-times"></i></span>
          </a>
        </div>
      </div>
      <div class="modal-body">
        <div class="spin-wrapper">
          <div class="spinner"></div>
        </div>
        <table id="video-table" class="table table-sm table-hover"></table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="video-modal" 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-frame" allowscriptaccess="always" allow="autoplay"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
...