1

I'm trying to create a div that will cover an iframe containing YouTube embed code, so when the user clicks on the video, javascript will fire instead of playing the video. I have included the wmode=opaque parameter in the src attribute, as every Google search tells you to do. This is currently working in Chrome and Firefox, but it does not work in IE10.

Below is what I currently have.

<div class="cover" onclick="alert('Working');" style="height: 350px; width: 350px;"></div>
<iframe width="350" height="350" frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/18YA73npI6s?wmode=opaque">

And CSS

div.cover {
    position: absolute;
    z-index: 100;
}
iframe {
    z-index: 1;
}

Above code live: fiddle.

Any insight into why this isn't working in IE10 would be helpful.

Jake W.
  • 81
  • 1
  • 6

1 Answers1

0

this was the only way i could manage

http://jsfiddle.net/azXe6/2/

div.cover {
position: absolute;
z-index: 100;
background-color:red;  /* added this*/
opacity:0; /* added this*/
}
San
  • 1,237
  • 1
  • 14
  • 29