Two iframes on the same HTML5 full screen - html

Question

I am using HTML5's full screen capabilities to expand a youtube embedded video in an iframe.
What I need to do is to show another iframe with an image on top of the first one, while on full screen.
I am looking at z-index but without success.
Code sample:
<iframe src="smiley.png" id="image"></iframe>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player" align="center"></div><br>
<button onclick="goFullscreen('player'); return false">Fullscreen</button>
Also (javascript to go fullscreen):
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
And finally (CSS):
.iframeclass {
position: absolute;
top: 0; left: 0;
width:100%;
height:100%;
}
iframe.image {
position: relative;
left:50px;
top:50px;
z-index: 3;
}
iframe.player {
position: relative;
left:50px;
top:50px;
z-index: 1;
}
Thanks!

Answer 1

If it is youtube video as you said, you can solve it by adding wmode=transparent, or wmode=opaque, in iframe code (HTML atrtributes, not CSS). I have that problem before so I found the solution.
Something like <iframe ... ... wmode=transparent>.
That's the problem with Flash actually, not YouTube only, I guess.
Here is the answer from Stack Overflow.