Question

我正在对其主页中嵌入了YouTube视频的网站进行一些改进。我自己没有添加此代码，但它看起来像：

      <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>

我对这个嵌入对象有一个小的ux问题：当使用鼠标的滚轮向上或向下滚动页面时，当鼠标光标悬停在视频上时它会停止工作。

我可以修改任何html / css / param设置以避免这种情况吗？

See the site itself是一个有效的例子。

编辑：到目前为止，我在Windows 7 64位和Ubuntu 11.10 64位都遇到了问题。

Answer 1

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

（和embed中的等价物）

这是猜测。我有个人经验，但如果你在IE中设置它，它将阻止Flash捕获滚动的箭头按钮，这似乎是相关的。

Answer 2

这是我能找到的唯一问题。我已经成功解决了这个问题。

我将我的嵌入内容包装在一个div中并添加了一个带有z-index的叠加层，如下所示：

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

然后，用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;
}

现在我也可以在闪光灯顶部滚动。

通过嵌入式YouTube / Flash视频避免滚轮劫持

2 个答案: