There is a simple layout that doesn't even make sense, a div in which iframe is added with the help of innerHTML - in this element there is a YouTube video (taken from the API).

When I click on this video, I need to intercept the click, and transfer the user to the video itself itself on YouTube.

Question: how can you intercept play YouTube videos in the iframe , and instead of playing on my site, redirect it to a new tab directly on YouTube?

1 answer 1

I think that everything is so simple and nothing needs to be explained. Simply the link is transparent over the iframe.

 .block { position: relative; width: 300px; height: 200px; margin: 5px; } a { position: absolute; z-index: 100; display: block; width: 100%; height: 100%; } 
 <div class='block'> <a href="https://www.youtube.com/watch?v=txByrfFXFv0&t=2s" target="_blank"></a> <iframe width="300" height="200" src="https://www.youtube.com/embed/txByrfFXFv0" frameborder="0" allowfullscreen></iframe> </div>

  • Not really. I think he meant that when you click the play button on the video, it should open a new tab. - Sherzod Yorov
  • @ Sherzodёrov, maybe you are right ... - Air
  • Well then, iframe will not help here ... it’s completely different to be used - Air
  • @Air I was thinking about the link over the frame, but really there are no ways to do this with intercepting the event in the frame itself or something like that? The fact is that I need to have the video itself with a preview on my page, and when I click to translate directly to YouTube. - Silento
  • There is, but it is no longer an iframe ... but it is necessary to fully implement it through the youtube API ... But to be honest, I could be wrong ... Although I am sure that I am right for 99% percent ... and I’m writing ... - Air