我正在尝试以模式打开视频。我正在使用javascript创建按钮，并在click方法上创建了带有嵌入式youtube视频的模态，但我一直收到404错误。什么是我的错误：
我在json中有视频ID，并从那里调用视频ID。包含表格的模式应使用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">×</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&modestbranding=1&showinfo=0");
})
$('#myModal').on('hide.bs.modal', function(e) {
$("#video").attr('src', $videoSrc);
})
当我单击模态时，出现404错误。
答案 0 :(得分：1)
以下方法将起作用，但是您不能在此处执行此操作，因为YouTube视频会触发跨站点警告。
设置了与https://youtube.com/处的跨站点资源关联的cookie，但未设置
，则仅会发送带有跨站点请求的cookie。SameSite属性。如果将来的Chrome浏览器版本设置为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&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);
}<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">×</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>