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="" target="_blank">
  <iframe width="100" height="60" src="" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture">
   </iframe>
</a>

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

• javascript
• jquery
• html
• css

• Post the different ways you have tried. – Chris Tapay Commented Feb 16, 2019 at 3:36
• 1 Please follow codepen.io/hue94/pen/XMGmbe – Hasanuzzaman Rana Commented Feb 16, 2019 at 3:36
• You shouldn't dictate a users actions in this aspect. What if the user does not want to go to the youtube link? What if the user wants to play, say a youtube music video while reading more on the current page? The youtube embed inherently includes these links. There's no point in embedding a video and not using it? Maybe you just need a thumbnail or something similar – soulshined Commented Feb 16, 2019 at 3:43
• I followed your codepen.io/hue94/pen/XMGmbe and i found the answer what i want thanks a lot Hasanuzzaman Rana – Mr.Ra Commented Feb 16, 2019 at 3:59

6 Answers 6

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./embed/wpx8xCC7ETM" target="_BLANK"><img src="https://img.youtube./vi/wpx8xCC7ETM/0.jpg" /></a>

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

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

Or want to check live demo? click here

Try this code

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

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

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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a videoId= "UQzEVP_YRT8" target="_blank" href="https://www.youtube./watch?v=UQzEVP_YRT8">

</a>

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

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