CODEWITHSUNDEEP
videohtmlcodecflowplayer
minusidea
minusidea

Reputation: 31

html5media & flowplayer wmode issues

I'm working on our new homepage and need to implement a solution that will run a video across iphone/ipad and the standard web browsers. I found a pretty decent solution with html5media - http://code.google.com/p/html5media/ but ran across an issue with a jquery dropdown falling behind the the swf object (this only happens on FF & IE - works fine on Safari & Chrome because it's loading mp4 instead of a swf object).

I know the issue is the wmode setting but can not for the life of me figure out where to set it in the html5media (http://html5media.googlecode.com/svn/trunk/src/html5media.min.js).

I'm hoping someone can help me or possibly give me a better solution of implementing the video. You can see the development page at idssite(dot)com/development/index.php - Sorry I can't link I'm being stopped by the spam prevention mechanism.

Thanks

Upvotes: 3

Views: 2243

Answers (2)

Nathan Hiemstra
Nathan Hiemstra

Reputation: 171

How to pass the wmode = transparent parameter into Flowplayer:

Flowplayer expects three arguments in the embed call.
1) Container ID
2) Parameters. (string or object)
3) Configuration (plugins or appearance settings)

More details: http://flowplayer.org/documentation/api/flowplayer.html

The wmode parameter must be passed through the the 2nd argument. If it's a string, Flowplayer expects it to be the URL to the Flash player. To pass additional parameters, it must be done as a JSON object.

No wmode:

$f("video-player", "flowplayer.swf" {
        plugins: {
            controls: {
            buttonOffColor: "#4523d3",
            borderRadius: "0",
            sliderColor: "#4523d3"
        }
    }
});

With wmode:

$f("video-player", {
            src:"flowplayer.swf",
            wmode:"transparent"
        }, {
        plugins: {
            controls: {
            buttonOffColor: "#4523d3",
            borderRadius: "0",
            sliderColor: "#4523d3"
        }
    }
});

Upvotes: 3

stldoug
stldoug

Reputation: 850

I experienced this problem before and I think the answer is just to add a "z-index" property to the drop-down style. I'm assuming you have something like a UL or a DIV containing your menu, so just add "z-index: 10" or whatever.

I wrote about it awhile back on my blog and the fix is as what I mentioned above: http://www.cjboco.com/blog.cfm/post/css-pulldown-menu-displays-behind-an-element-or-picture-in-ie7

Sounds like the same thing. Hope it helps.

Upvotes: 1

Related Questions