Embedded video not opening in modal

Question

I am trying to open my video in a modal. I am creating the button using javascript and on the click method I want to open the modal with an embedded youtube video, but I keep getting an 404 error. WHat is my error:

I have the video id in my json and am calling the video id from there. The modal that contains the table should call the other modal with the youtube video

My code:

HTML:

JavaScript

json.forEach(elem => {
elem.youtube = `
 `;
});

 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&modestbranding=1&showinfo=0");
})

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

When I click on the modal I get a 404 error.

Mr. Polywhirl · Accepted Answer

The following will work, but you cannot execute this here because YouTube videos trigger a cross-site warning.

A cookie associated with a cross-site resource at https://youtube.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure

I created a working demo here: 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 = $('', { 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($('').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&modestbranding=1&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); }

Embedded video not opening in modal

Answers (1)

Related Questions