Currently, I am working on a webpage specifically designed for iPad and I have encountered an issue:
I am trying to embed a YouTube video using an iframe and also need a div element to remain on top of it.
To achieve this, I have added "?wmode=transparent" to the URL of the YouTube video and utilized z-index as well.
Everything works perfectly on PC - I can click on the top div as expected.
However, on the iPad, while initially the div stays on top of the video and is clickable, once the video starts playing, clicking on the div passes the click event to the YouTube player instead of the div content.
Does anyone have any suggestions or solutions to this issue?
EDIT: Here is the iframe code:
<iframe style="width: 100%; height: 100%" src="http://www.youtube.com/embed/JQkActP-isE?wmode=transparent" frameborder="0" allowfullscreen=""></iframe>
And here is the code for the top div:
<div class="topdiv" style="position: absolute; right: -410px; width: 400px; display: block; background-color: rgb(255, 255, 255); z-index: 500000; background-position: initial initial; background-repeat: initial initial; ">
Note: The div becomes unclickable when the video is played.