Floating div container over a YouTube iframeIn the "old days", the solution for floating div over flash videos, were simply to add:
Code (HTML):<object […] <param name="wmode" value="opaque"> […] <embed wmode="opaque" […]
This worked fine until YouTube start using iframe to embed videos. Some browsers do not support div containers floating over embedded media. Flash movies who are embedded in iframes has a default wmode, which make them float over anything else. I am using my
Tower Bridge Live video as an example, where the social buttons had the tendence to disappear behind the embedded video. The original YouTube code:
Code (HTML):<iframe width="640" height="480" src="http://www.youtube.com/embed/R1e5u3gysuw" frameborder="0" allowfullscreen></iframe>
The solution is to add
&wmode=transparent to the end of the src attribute in the iframe:
Code (HTML):<iframe width="640" height="480" src="http://www.youtube.com/embed/R1e5u3gysuw&wmode=transparent" frameborder="0" allowfullscreen></iframe>
Sometimes ampersand (&) doesn't work. Try to add question mark instead of ampersand to the end of the src attribute in the iframe:
Code (HTML):<iframe width="640" height="480" src="http://www.youtube.com/embed/R1e5u3gysuw?wmode=transparent" frameborder="0" allowfullscreen></iframe>
Below is the annoying phenomenon where div disappear behind the iframe illustrated. The solution can be seen here:
Tower Bridge Live.