How To Stop An Embedded YouTube Clip Appearing In Front of Content On Your Web PageHaving recently embedded a YouTube clip into a web site I was working on using the neat bit of HTML5 code below:
<iframe class="youtube-player" frameborder="0" height="207" widt=”289” src="http://www.youtube.com/embed/57pczWFtS0U" type="text/html" width="289"></iframe>
I was frustrated to find that when I went to view the video clip on my web page it was causing a problem with my pop up image gallery by appearing in front of all the images that popped up. I immediately thought I was going to have to start digging deep into the depths of my style sheets and hunt out the relevant z-indexes when I came across the fantastic quick fix below:
Simply add
?wmode=opaque
To the end of your video clip url and hey presto your problem is solved.
URL Before
http://www.youtube.com/embed/YourYouTubeClipReference
Url After
Facebook Page
Linked In
Twitter
YouTube