Embedded YouTube Blocks Popup on Website
Okay I have spent almost two hours trying to figure out how to prevent a YouTube Video on my featured video sidebar from standing on top of my PopUp Domination mailing subscribe box that opens as a popup.
I tried tweaking the Z-index of the plug-in .js file itself as well as various configurations of Z-index on the YouTube embed code but nothing I did would let my PopUp Domination stand in front of the embedded YouTube Video.
It looked like this, which prevented someone from filling out the form in the popup:
Finally, I found a solution but it was a pretty ugly solution.
So this is what typical YouTube Embed Code looks like when you copy it from YouTube video directly:
<object width="359" height="227">
<param name="movie" value="http://www.youtube.com/v/3pIcGU6Ith0&hl=en_US&fs=1">
</param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/3pIcGU6Ith0&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="359" height="227">
</embed></object>Well, I learned that the <embed> tag is not exactly very good HTML and that if you redo the code so you are using just an <object> tag like such:
<object type="application/x-shockwave-flash" style="width:360px; height:330px;" data="http://www.youtube.com/v/3pIcGU6Ith0&hl=en_US&fs=1?rel=0">
<param name="movie" value="http://www.youtube.com/v/3pIcGU6Ith0&hl=en_US&fs=1?rel=0" />
<param name="wmode" value="transparent"></param></object>
Plus you have to add the <param name="wmode" value="transparent"></param> and this will cause the YouTube video to work just fine and any popup to take precedence over the YouTube video. This is a bit inconvenient to do every time and I am hoping that I can figure out how to modify the plugin I am using (or have the developer do it) so that I don’t have to constantly rework my YouTube Embed code whenever I want to add a Google YouTube Video to my WordPress Blog.
In the meantime, changing your YouTube Embed code will allow CSS or Javascript Popup to go in front of your embedded YouTube Video.
-Dragon Blogger
Get free demos for comptia a+ and 650-195 exam with 100% guaranteed success. Our best quality 642-583 prepares you well before appearing in the final exams of cissp & ccip.
No related posts.
Okay first of all: using the iframe embed code from youtube it seems like:
- Everything looks good in Firefox, Chrome on both windows and mac, safari on mac and ipad.
- Youtube blocks the popup only on internet explorer.
I implemented the fix described in this post (fyi you have to go and grab the 'old' embed code from youtube to do it) and now:
- Everything looks good everywhere except...
- now i get youtube blocking the popup on safari on ipad(!)
If anyone has a good solution please let me know!
- spam
- offensive
- disagree
- off topic
Like