Avoid scroll-wheel hijack by embedded youtube / flash video

Question

I am making some improvements on a web-site that has a youtube video embedded in its home-page. I have not added this code myself, but it looks like:

      <object width="380" height="307">
        <param name="movie" value="http://www.youtube.com/v/DooLJvsH_BY&amp;hl=en_US&amp;fs=1&amp;" />
        </param>
        <param name="allowFullScreen" value="true" />
        </param>
        <param name="allowscriptaccess" value="always" />

        </param>
        <embed src="http://www.youtube.com/v/DooLJvsH_BY&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="380" height="307"></embed>
      </object>

I have a small ux problem with this embedded object: When scrolling the page up or down using the scroll-wheel of the mouse, it stops working when the mouse cursor is hovering over the video.

Are there any html / css / param settings that I can modify to avoid this?

See the site itself for a working example.

Edit: I experience the problem both in Windows 7 64bit and Ubuntu 11.10 64bit so far.

Answer 1

<param name="wmode" value="transparent" />

(and the equivalent in embed)

This is a guess. I have personal experience though that if you set this in IE, it will prevent Flash from capturing the arrow buttons for scrolling, which seems related.

Answer 2

This is the only issue I could've found for this matter. I've managed to kinda fix this with a hack.

I've wrapped my embedded content in a div and added an overlay with z-index, like so:

<div class="flash-wrapper">
    <div class="overlay"></div>
    <object>
        My object code goes here
    </object>
</div>

Then, with css

.flash-wrapper {
    max-width: 100%; /*For responsiveness purposes*/
    overflow: hidden; /*To wrap around everything inside*/
    position: relative;
}
.flash-wrapper object {
    /*to fully fill the wrapper - optional*/
    width: 100%;
    max-width: 100%;
    height: auto;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /*The following only applies when the object is declared after the overlay. The overlay needs a higher z-index number*/
    z-index: 100;
}

Now I can scroll on top of the flash as well.