tags:

views:

230

answers:

2
Q: 

overlay opaque div over youtube iframe :)

How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

edit (added more clarification): HTML5 is approaching us, with more and more devices that use it instead of flash, which complicates the embedding of youtube videos, thankfully youtube provides a special embeddable iFrame with handles all of the video embedding compatibility issues, but now the previously working method of overlaying a video object with a semi-transparent div is no longer valid, I am now unable to add a <param name="wmode" value="transparent"> to the object, because it is now a iFrame, so how do I add a opaque div on top of the iframe embedded video?

solution: 1. get contents from youtube link 2. create page with altered content (and cache it) 3. use iframe with altered page

object markup (for personal reference):

<!doctype html>
<html>
    <body>
<div id="overlay"></div>
<object width="640" height="385"><param name="wmode" value="transparent"><param name="movie" value="http://www.youtube.com/v/NWHfY_lvKIQ?fs=1&amp;amp;hl=en_US"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed wmode="transparent" src="http://www.youtube.com/v/NWHfY_lvKIQ?fs=1&amp;amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

<script>
    document.onclick = function(e) {
    //e.preventDefault();
    }
</script>
<style>
    * { margin:0; padding:0; }
    #overlay {
    position:fixed;
    width:100%;
    height:100%;
    z-index:5;
    opacity:0.5;
    background:#000;
    }
</style>
</body>
</html>
+3  A: 
meder  2010-09-29 09:37:41
Yea, I found out what the problem was, in firefox and chrome it works with normal backgrounds, adding the opacity makes it shine through... yours also shines through.
YuriKolovsky  2010-09-29 09:50:33
edited the iframe example to look the way that mine looks. http://jsfiddle.net/fdsaP/6/
YuriKolovsky  2010-09-29 09:59:03
So... you want the opacity to apply to the object/embed element inside of the iframe?
meder  2010-09-29 10:00:48
yes, I did not notice that the iframe was overlayed because for me the object is covering the full iframe, I need the video to be covered if its possible, else ill replace it with a black div of the same width/height and position.
YuriKolovsky  2010-09-29 10:02:05
+1 it's wmode which is the problem with flash
annakata  2010-09-29 10:10:35
@meder thanks for the link and solution! will try it out right now, but the flash is still click-able though :)
YuriKolovsky  2010-09-29 10:22:25
@YuriKolovsky - I fail to see where you specified that you didn't want it to be clickable?
meder  2010-09-29 10:23:42
@YuriKolovsky - since I have a better idea of what you would like now, try http://jsfiddle.net/fdsaP/16/. I embed the opacity layer in the iframe page.
meder  2010-09-29 10:28:32
@meder, the last #16 jsfiddle looks great, although doing it this way pretty much removes the whole point of the youtube iframe embedding method, http://youtubeking10.blogspot.com/2010/07/embed-youtube-vidoes-with-iframe.html :)
YuriKolovsky  2010-09-29 10:29:09
Yeah, I'm afraid you really don't have much other options unless I'm aware of something. Though I just recently thought of actually displaying an overlay SWF that takes up 100% of the page and has the opacity layer, which should float over the iframe's object. One could also setup some dynamic service which returns the html source of my yt2.html page modified to serve the overlay or somethin' like that..
meder  2010-09-29 10:34:26
or I can try asking youtube/google nicely to add the wmode transparent option :)
YuriKolovsky  2010-09-29 10:44:06
You could also try invoking `preventDefault` on the document's click event... too sleepy to think of any more ideas though
meder  2010-09-29 10:48:10
thank you for the ideas meder :) your option B would be best, option A is a no-go, because I might as well just embed the video right on the page, this issue that I'm describing will probably get solved by youtube if they notice it.
YuriKolovsky  2010-09-29 10:51:37
Even if you get youtube to render `wmode=transparent` on their video, it will still be clickable without further action. What's wrong with just embedding the code, again? Do you really need the entire youtube page in the iframe?
meder  2010-09-29 10:59:37
The idea behind iframing video instead of embedding video is that it puts the responsibility of maintaining the video onto youtubes side, imagine if some new better way of embedding videos came out, this way I don't need to update any the vids on my sites.
YuriKolovsky  2010-09-29 11:02:57
I have another theoretical solution, maybe I could somehow automatically take a screenshot of the iframe video with javascript and then replace the iframe with the screenshot while the opacity is overlaying it? its not as fancy as overlaying a video that is playing, but it would be better than a plain black box or the click-through video.
YuriKolovsky  2010-09-29 11:04:35
Actually I had the same idea (screenshotting) but it would involve hosting the image, which didnt seem ideal given you just wanting to iframe src it solely.
meder  2010-09-29 11:05:51
@YuriKolovsky - if you're not serving this to hundreds of thousands of people and it isn't resource intensive, then my idea which I proposed, maybe you didnt understand it fully, still stands I think. It was that you could do `<iframe src="file.php?url=http://www.youtube.com/blah">` where your `file.php` grabs the contents of the youtube page, renders them fully, and just simply adds the wmode and/or the overlay. If youtube ever changed the method you'd just have to update this one page alone and it would be fixed all across the board wherever its referenced.
meder  2010-09-29 11:08:37
If the above is resource intensive though, then you could easily use some caching system which would lookup urls that havent been indexed in say, the last week or so... and the new ones would be appended to that cache.
meder  2010-09-29 11:13:04
oh now I see it, I could even host this on some dedicated page of my own that provides the "fixed" youtube markup! currently it's really not intensive with "admin only" usage and caching would work great. Thanks again for your original solution that you might even document on your bugs archive website :)
YuriKolovsky  2010-09-29 11:15:53
I actually wrote an article already since technically it isn't really a "bug" but just an odd behaviour. But yeah, the site needs a lot of work and the article probably needs to be modified.
meder  2010-09-29 11:18:00
+1  A: 

Is the opaque overlay for aesthetic purposes?

If so, you can use:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'pointer-events: none' will change the overlay behavior so that it can be physically opaque. Of course, this will only work in good browsers.

lofto  2010-09-29 09:48:19
safari 4, chrome and firefox3.6 still clicks through??
YuriKolovsky  2010-09-29 09:53:46
Isn't that wat you want?
Mr. Matt  2010-09-29 09:55:45
I'm trying to put the youtube embedded video behind a opaque background for completely aesthetic purposes :)
YuriKolovsky  2010-09-29 09:57:08
In that case, your original code works fine.
lofto  2010-09-29 09:58:55
no it does not? http://jsfiddle.net/fdsaP/8/
YuriKolovsky  2010-09-29 10:04:33

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?