Html Question posted in
Some basic documentation can be found here.

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

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.

HTML:

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

CSS

.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;
}

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.

Tags:

2

Answers


  1. 0

    In <div>, you can use onclick and href to make it clickable.

    .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;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Hello, World!</title>
</head>

<body>
  <div class="column">
    <!-- Add onclick function here -->
    <div class="videothumbnail" onclick="window.location.href='https://www.youtube.com/watch?v=MVTQJQQkj4E';">
      <!-- Edit img src as necessary -->
      <a href="https://www.youtube.com/watch?v=MVTQJQQkj4E"><img src="https://upload.wikimedia.org/wikipedia/en/2/27/Bliss_%28Windows_XP%29.png" alt="" /></a>
      <div class="playbutton"><img src="https://cdn-icons-png.flaticon.com/512/0/375.png"></div>
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search