0

I have this div block which shows a preview image to a video (YouTube), the problem is that this preview thumbnail generated by CMS, it doesn't give the YouTube play icon in the middle of it, so it doesn't look like a video, but just a plain image.

So I came up with a solution (top answer CSS show div background image on top of other contained elements), by adding an empty span and giving it a background, that YouTube play icon and position absolute and positioning it in the middle of that image preview thumbnail. All looks great, now the problem is that background is not a link, the thumbnail is a link to the video, so that transparent icon hides the thumbnail link below it.

enter image description here

Community
  • 1
  • 1
Optimus Prime
  • 499
  • 3
  • 8
  • 18
  • 1
    You could try this solution: [Click through a div to underlying elements](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) – Garrin May 12 '14 at 07:57
  • Thank you so much! I needed that pointer-events: none; didn't even know such rule existed! Can you post this as answer please so I could choose it. – Optimus Prime May 12 '14 at 08:00
  • Sadly, it's not working on IE. – Optimus Prime May 12 '14 at 08:04
  • Depending on the HTML, you might be able to nest your play button element inside the clickable element? What does the generated HTML look like? – xec May 12 '14 at 08:08
  • In that post was mentioned to use an IE filter. Doesn't this work either on IE? – Garrin May 12 '14 at 08:11

1 Answers1

0

According to this post: Click through a div to underlying elements

It works, if you add the following CSS attribute:

pointer-events: none;

Here is also a post about the IE compatibility: fromanegg

Community
  • 1
  • 1
Garrin
  • 541
  • 1
  • 3
  • 8