<分区>
javascript - 如何在不更改 URL 的情况下在我的网站中打开 YouTube 视频
标签 javascript html css youtube
我的网站菜单中有一个名为“视频”的链接，我想向用户展示一个 YouTube 视频，但我不想跳转到 YouTube 网站。我想在我的网站中显示它，如下所示。我在一个网站上访问过这个
它类似于网站中的播放器。有什么办法可以实现这样的事情吗？非常感谢任何帮助。
这是我必须在需要时显示视频的代码。
<li class="dropdown">
<a href="#" class="main-menu"><span class="text">documents</span><span class="fa fa-angle-down icons-dropdown"></span></a>
<ul class="dropdown-menu dropdown-menu-1">
<li>
<a href="http://www.youtube.com/....." class="link-page"> <span class="text">vidéo</span></a>
</li>
</ul>
</li>
最佳答案
我建议你为此使用模态链接 检查下面的代码段示例。
$(document).ready(function(){
$("#myModal").on("hidden.bs.modal",function(){
$("#iframeYoutube").attr("src","#");
})
})
function changeVideo(vId){
var iframe=document.getElementById("iframeYoutube");
iframe.src="https://www.youtube.com/embed/"+vId;
$("#myModal").modal("show");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<li><a href="index.html">Document</a>
<ul class="dropdown">
<li><a onclick="changeVideo('pu1jqT5dPj0')">video</a></li>
</ul>
</li>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<iframe id="iframeYoutube" width="560" height="315" src="https://www.youtube.com/embed/e80BbX05D7Y" frameborder="0" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>如果您需要一些修改，您可以查看此链接 https://appleple.github.io/modal-video/ .
如果您使用 bootstrap，可以阅读此 https://getbootstrap.com/docs/4.0/components/modal/
您可以根据您的要求使用这些属性。
关于javascript - 如何在不更改 URL 的情况下在我的网站中打开 YouTube 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47855050/