gpt4 book ai didi

javascript - 在 Bootstrap 模式框中打开 YouTube 视频

转载 作者:行者123 更新时间:2023-11-28 03:56:59 25 4
gpt4 key购买 nike

我列出了 SQL 表中的视频数据。

表中的字段:- sidebar_video_id(自动递增)- sidebar_video_nev- sidebar_video_link(完整网址)- sidebar_video_v_id(网址末尾的视频 ID)

我想要的是,当我单击每个视频时,它会打开并在 Bootstrap 模式框中播放。现在该框打开,但它是空的,我没有收到任何控制台错误。

<?php
$get_videos = mysqli_query($kapcs, "SELECT * FROM sidebar_video");
if(mysqli_num_rows($get_videos) > 0 )
{
while($vid = mysqli_fetch_assoc($get_videos))
{
echo '<div class="sidebar_youtube_box">';
echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'"><img src="http://img.youtube.com/vi/'.$vid['sidebar_video_v_id'].'/hqdefault.jpg" class="img-responsive"></a>';
echo '</div>';
}
}
?>


<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Bezárás</span></button>
<h4 class="modal-title" id="myModalLabel">Videó megtekintése</h4>
</div>
<div class="modal-body" id="video_modal_body">

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

$('.open_youtube_modal').click(function(e) {
e.preventDefault();
var v_id = $(this).attr('id');
var full_url = $(this).attr('data-url');

var embed_html = '<iframe width="560" height="315" src="' + full_url + '" frameborder="0" allowfullscreen></iframe>';

//alert(embed_html);

$('#video_modal_body').html(embed_html);
$('#videoModal').modal('show');

});

最佳答案

您必须使用<a href="https://www.youtube.com/embed/[videoId]" rel="noreferrer noopener nofollow">https://www.youtube.com/embed/[videoId]</a>格式而不是 <a href="https://www.youtube.com/watch?v=[videoId]" rel="noreferrer noopener nofollow">https://www.youtube.com/watch?v=[videoId]</a> 。 YouTube 不允许使用后者进行跨源框架。

关于javascript - 在 Bootstrap 模式框中打开 YouTube 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47484804/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com