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

【问题标题】：How to open YouTube embedded video in new tab?如何在新标签页中打开 YouTube 嵌入视频？
【发布时间】：2022-02-04 13:06:40
【问题描述】：

我嵌入了 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>

【问题讨论】：

发布你尝试过的不同方式。
请关注codepen.io/hue94/pen/XMGmbe
您不应该在这方面指定用户的操作。如果用户不想访问 youtube 链接怎么办？如果用户想在当前页面上阅读更多内容的同时播放 youtube 音乐视频，该怎么办？ youtube 嵌入本身就包含这些链接。嵌入视频而不使用它没有意义吗？也许你只需要一个缩略图或类似的东西
我关注了你的 codepen.io/hue94/pen/XMGmbe，我找到了我想要的答案，非常感谢 Hasanuzzaman Rana

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

试试这个代码

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

【讨论】：

我希望它在不同的标签中而不是在同一个标签中，这意味着我想在网站上显示缩略图，然后有人点击然后重定向到 youtube
尝试点击youtube的边缘
是的，我知道，但我想要整个，我的意思是整个嵌入区域点击然后在 youtube 中重定向

【解决方案3】：

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

在本例中，wpx8xCC7ETM 是您的视频 ID。如果你愿意，可以用另一个替换它。

 &lt;a href="https://www.youtube.com/embed/wpx8xCC7ETM" target="_BLANK"&gt;&lt;img src="https://img.youtube.com/vi/wpx8xCC7ETM/0.jpg" /&gt;&lt;/a&gt;

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

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

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

【讨论】：