Question

我已嵌入YouTube视频。我试图在新标签页中打开它，但失败了。如何在新标签页中打开嵌入式YouTube视频？我尝试了不同的方法，但是找不到解决方法。

我的代码在这里：

<a href="https://www.youtube.com/embed/wpx8xCC7ETM" target="_blank">
  <iframe width="100" height="60" src="https://www.youtube.com/embed/wpx8xCC7ETM" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture">
   </iframe>
</a>

Answer 1

尝试使用此代码

<a href="https://www.youtube.com/embed/wpx8xCC7ETM" target="_blank">
  <iframe width="100" height="60" src="https://www.youtube.com/embed/wpx8xCC7ETM" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture">
   </iframe>
</a>

Answer 2

仅显示视频的缩略图，当用户单击它时，在新标签上打开youtube。

在此示例中，wpx8xCC7ETM是您的视频ID。如果需要，可以将其替换为另一个。

 <a href="https://www.youtube.com/embed/wpx8xCC7ETM" target="_BLANK"><img src="https://img.youtube.com/vi/wpx8xCC7ETM/0.jpg" /></a>

Answer 3

您可以使用YouTube数据API来获取缩略图的链接，并将其显示为锚标记中的图像。相同的Google API资源管理器网址：https://developers.google.com/apis-explorer/#p/youtube/v3/youtube.videos.list?part=snippet&id=wpx8xCC7ETM&_h=1& 您可能会了解更多如何在文档中使用它，并根据需要使用JavaScript对其进行调用。

Answer 4

您可以尝试以下代码在新标签页中打开youtube视频

<a href="https://www.youtube.com/watch?v=xbjHvDmwEJ0" target="_blank" title="Click me">
   <img src="https://img.youtube.com/vi/wpx8xCC7ETM/1.jpg" />
</a>

还是要查看现场演示？ click here

Answer 5

这是从videoId提取youtube重击的动态方法。

看看下面的代码

// base url for thump image
var baseUrl = "https://img.youtube.com/vi/{ID}/0.jpg"
$("a").each(function(){
var videoId = $(this).attr("videoId") // video id content 
var url = baseUrl.replace("{ID}", videoId); // generate a thump url for the videoId
$(this).append("<img src='"+url+"' />") // insert an image to the selected link
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a videoId= "UQzEVP_YRT8" target="_blank" href="https://www.youtube.com/watch?v=UQzEVP_YRT8">

</a>

Answer 6

如果您要在新标签页中重定向到youtube视频，请尝试以下操作：

window.open(`https://www.youtube.com/watch?v=${url}`, "_blank")

如何在新标签页中打开YouTube嵌入式视频？

6 个答案: