Embedded videos show on top of popup login box #177

Closed
brianmcdonnell opened this Issue Jul 29, 2011 · 3 comments

2 participants

@brianmcdonnell

This is due to the html generated by Embed.ly (which reddit uses) for embedding videos/thumbs in reddit. Embedly's returned html does not set the wmode for embedded Flash content. A wmode value of 'opaque' would allow html to be drawn on top of embedded Flash content (see below for example html).
[edit: Embed.ly have a solution to this, but reddit isn't using it. See comment below.]

Steps to reproduce:
0) Use Chrome_12.0/Flash_10.3/Win32, IE9.0.8/Flash_10.1/Win32 or Chrome_13.0/Flash_10.3/Ubuntu
1) Go to http://www.reddit.com/r/videos/
2) Ensure you are logged out.
3) Expand an embedded video (do not click on the off-site link to youtube or wherever)
4) Try to up/down vote on the link (reddit will prompt you with a login html div popup)
[The embedded video will be rendered on top of the popup obscuring the relevant html]

The solution to this is to add the param 'wmode' with value 'opaque' as a child node of '' and as an attribute of '' as shown below:

<object width="400" height="250"> 
    <param name="movie" value="http://www.youtube.com/v/IF_Dk5-10bI?version=3"> 
    <param name="allowFullScreen" value="true"> 
    <param name="allowscriptaccess" value="always"> 
    <param name="wmode" value="opaque"> 
    <embed src="http://www.youtube.com/v/IF_Dk5-10bI?version=3" 
        type="application/x-shockwave-flash" 
        width="400" 
        height="250" 
        wmode="opaque" 
        allowscriptaccess="always" 
        allowfullscreen="true"> 
</object>

Note 1: Setting this param to 'opaque' could have performance side effects as it may cause Flash to ignore hardware acceleration capabilities if available - I'm not sure about this though, so perhaps someone else can comment.

Note 2: I have submitted this issue to Embedly to ensure that they are aware of it. #

If this should be fixed there are a few options:
1. Reddit could manipulate the response after it's received from Embedly
2. Reddit could generate its own embedding html, populating values with data received in oembed response from Embedly.
3. Reddit could wait for Embedly to provide a fix.

@brianmcdonnell

The guys at Embed.ly replied. It turns out that they already provide a way to do do this:

Simply append wmode=opaque to the request.
e.g.
http://embed.ly/docs/explore/oembed?wmode=opaque&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DPOolPSvSbnc

@spladug
reddit member

Nice! Thanks.

@spladug
reddit member

This no longer appears to be a problem in any browser I've tested with. I'm going to close this issue. Feel free to reopen if it's still reproducible.

@spladug spladug closed this Oct 10, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment