'How to open YouTube embedded video in new tab?

I have embedded YouTube video. I tried to open it in a new tab but failed. How can I open an embedded YouTube video in new tab? I tried different ways, but I can't find the solution.

My code is here:

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


Solution 1:[1]

You can try below code to open youtube video in new tab

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

Or want to check live demo? click here

Solution 2:[2]

Try this code

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

Solution 3:[3]

Just show a thumbnail of the video and when the user clicks on it open youtube on a new tab.

In this example, wpx8xCC7ETM is your video id. replace it with another if you want.

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

Solution 4:[4]

you can use YouTube data API to get link of thumbnails and display that as an image inside anchor tag. Google APIs explorer URL for the same: https://developers.google.com/apis-explorer/#p/youtube/v3/youtube.videos.list?part=snippet&id=wpx8xCC7ETM&_h=1& you may learn more how to use it in documentation, and call it as required using JavaScript.

Solution 5:[5]

Here is a dynamic way to extract a youtube thump from a videoId.

Have a look at the code below

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

Solution 6:[6]

If you are looking for to redirect to a youtube video in a new tab try the following:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sunil Acharya
Solution 2 a stone arachnid
Solution 3 Jijin P
Solution 4 goyaltushar92
Solution 5 Alen.Toma
Solution 6 klendi

Related Questions