Question

I’m trying to place a flash video (object, swf) inside a div, and have that div draggable around the user’s page. My code below works fine in everything except Chrome, where all the buttons in the player become un-clickable. (you can still hover over buttons for some reason and get feedback, like a mouseover in the flash player, but you can’t click it)

This means that mute, pause, volume, fullscreen, etc are all broken in chrome. Clicking anywhere on the player just treats it like a drag click (any click anywhere on the player gives no feedback, but holding it and dragging will drag the div)

What I’m looking for is a click/draggable border around the div, with a functioning video player inside (like it works in IE and FF), that stays in its current position on the screen as the user scrolls up and down the page’s contents.

I’m just running the following in my js:

$('#video').draggable();

and my relevant CSS is:

#video
{
    position: fixed;
    right: 0;
    bottom: 0;
    padding: 10px;
    border-radius: 10px;
    background-color: #0DD0FC;
    display: block;
    width: 640px;
    cursor: pointer;
    height: 360px;
}

and in my HTML I have

<div id="video" style="z-index: 4500;">
        <object width="100%" height="100%">
            <param name="movie" value="http://www.domain.com/value;autoplay=true" />
            <param name="allowscriptaccess" value="always" />
            <param name="allowfullscreen" value="true" />
            <param name="wmode" value="transparent" />
            <embed src="http://www.domain.com/value;autoplay=true" type="application/x-shockwave-flash"
                allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%"
                wmode="transparent"></embed></object> 
    </div>

Answer 1

You can specify which children should not activate draggable, but I can’t vouch for how this works with Flash content I’m afraid.