How can I click through a div to open youtube link?

Question

I made a custom play button via PNG that appears when the cursor is hovering over the video thumbnail. But now the video isn't clickable. If I set pointer events to none it won't make the hover event show up.

.videothumbnail img{
    width: 100%;
    object-fit: contain;
    display: block;
}

.videothumbnail{
    overflow: hidden;
    position: relative;
}

.videothumbnail img{
    transition: transform .3s ease;
}

.videothumbnail:hover img {
    transform: scale(1.1);
  }

.playbutton{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.521);
    opacity: 0;
    transition: .3s;
}

.playbutton:hover{
    opacity: 1;
}

<div class="column"> 
  <div class="videothumbnail">
    <a href="https://www.youtube.com/watch?v=MVTQJQQkj4E"><img src="afp_images/photographs/musicvideos/UNTAINTED_THUMBNAIL.jpg" alt=""/></a>  
    <div class="playbutton"><img src="afp_images/photographs/musicvideos/playbuttonoverlay.png"></div> 
  </div>
</div>

Instead of sourcing the play button overlay in the HTML, I tried to source it as a background-image in the CSS but that didn't work either. Help would be greatly appreciated. Would it be better to just make a play button shape with raw CSS and overlay it on top of my video link? How would I go about that? I figured just having a image overlay would be the easiest way to go about it.

I have no jquery knowledge but I would hope this is possible to do without it.

Perhaps stackoverflow.com/questions/16555644/…

mplungjan
– mplungjan

2024-11-07 12:10:27 +00:00
Commented Nov 7, 2024 at 12:10 — mplungjan
– mplungjan, Commented Nov 7, 2024 at 12:10

Meet · Accepted Answer · 2024-11-07 06:47:18Z

This issue is arising due "playicon", when you hover the playicon is loaded above the a due to which when you click on screen it is clicked on playicon not actual a tag. Solving this issue would be pretty simple, just add playicon img within a tag and it will start working. No js or anything is needed

Below is working example and if I have missed something then do share.

.videothumbnail img {
  width: 100%;
  object-fit: contain;
  display: block;
}

.videothumbnail {
  overflow: hidden;
  position: relative;
}

.videothumbnail img {
  transition: transform .3s ease;
}

.videothumbnail:hover img {
  transform: scale(1.1);
}

.playbutton {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.521);
  opacity: 0;
  transition: .3s;
}

.playbutton:hover {
  opacity: 1;
}

.videothumbnail a {
  z-index: 10;
}

<div class="column">
  <div class="videothumbnail">
    <a href="https://www.youtube.com/watch?v=MVTQJQQkj4E"><img src="https://images.pexels.com/photos/29159338/pexels-photo-29159338/free-photo-of-teatro-principal-in-guanajuato-mexico-under-clear-sky.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" />
      <div class="playbutton"><img src="https://cdn-icons-png.flaticon.com/512/0/375.png"></div>
    </a>
  </div>
</div>

Collectives™ on Stack Overflow

How can I click through a div to open youtube link?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related