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

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

只需显示视频的缩略图，当用户单击它时，请在新标签上打开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 2

您可以尝试以下代码在新选项卡中打开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>

还是想检查现场演示？单击此处

Answer 3

尝试此代码

<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 4

您可以使用YouTube数据API获取缩略图的链接，并将其显示为锚固标签中的图像。Google APIS Explorer URL相同：https：//developers.google.com/apis-explorer/#p/youtube/v3/youtube.videos.videos.list？您可以了解更多在文档中使用它的方法，并使用JavaScript根据需要调用它。

Answer 5

这是一种从vaceoid中提取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")