'<a /> tag with a child image opens the image in new tab instead of the <a /> tag's link when clicked

I have an anchor tag <a /> with and image as a child , basically I want to create an image that works as a link .in this case the image is a youtube thumbnail and the link is to the youtube video . so what should happen is in android when you click on the thumbnail you should get redirected to the youtube app .

My problem is that the browser opens the thumbnail image in a new tab, instead of redirecting you to the youtube app.

I already tried to set <a />'s dsipaly as block but still it didn't solve the issue . 

<a href="https://youtu.be/9IZm71niSao" target="_blank">
<div style="width: 100%; height: 300px;">
   <div class="css-1i0qlul">
      <button type="button" class="css-1hqqg82">
        <svg 
          stroke="currentColor" fill="currentColor" stroke-width="0" 
          viewBox="0 0 24 24" height="3em" width="3em" 
          xmlns="http://www.w3.org/2000/svg">
              <path d="M10 16.5l6-4.5- 
                     6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 
                     10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59- 
                     8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path> 
       </svg>
    </button>

    <img src="https://i4.ytimg.com/vi/9IZm71niSao/maxresdefault.jpg" alt="thumbnail" class="css-dgd53t">
    </div>
  </div>
</a>



image within anchor tag

androidhtmlcsswebviewyoutube-api


Solution 1:[1]

Remove target="_blank" from your <a> tag.

_blank Opens the linked document in a new window or tab

The default value of the target attribute is _self, which opens the linked document in the same frame as it was clicked

PS: Your image is really blurry, but I was able to see the issue. Please try posting actual HTML in the OP

Solution 2:[2]

Just add rel="noopener" inside the anchor tag bro. If doesn't works then try adding rel="noopener noreferrer".

<Link href="https://www.google.com/" passHref>
   <a target='_blank' rel="noopener">Go to google</a>
</Link>

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 Tushar
Solution 2 Learn More

Related Questions