我在页面中嵌入了 YouTube 视频。我还有一个菜单(打开时)位于该视频的顶部。
我已将菜单的 z-index 值设置为高于视频的 z-index 值。
我还将视频的 wmode 设置为透明,以允许在其上方显示内容。
我在电脑上的 safari、ie、chrome 或 firefox 中完全没有遇到任何问题(菜单位于视频顶部,理应如此),但在 iPhone 和 iPad 上 - flash 内容被替换为大的内容可点击的 YouTube 按钮,打开 YouTube 应用程序中嵌入的 YouTube,那个大按钮位于菜单上方。有人知道如何解决这个问题吗?
谢谢你!
I have an embedded youtube video in a page. I also have a menu (when opened) is on top of that video.
I have set the z-index value of the menu to higher than that of the video.
I have also set the wmode of the video to transparent
to allow for content on top of it.
I am experiencing no issues at all in safari, ie, chrome, or firefox on my computer (the menu is on top of the video, as it should be), but on the iPhone and iPad - the flash content gets replaced with a big clickable youtube button that opens the youtube embed inside the youtube app, and that big button is above the menu. Does anybody know how to solve that issue?
Thank you!
发布评论
评论(4)
我不确定这是否是您所需要的。 jsbin.com 上的实例会有所帮助。无论如何,我希望以下内容有用。
您可以使用youtube提供的iframe方法来播放其视频。如果浏览器支持 html5 将用它显示视频,否则用 flash。而且无需打开 iPhone/iPad 的应用程序,即可与 iPhone/iPad 完美播放。
您可以使用以下代码作为示例 <
iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.html com/embed/bIPcobKMB94"frameborder="0">
在上面的示例中,视频 ID 是 bIPcobKMB94。您可以更改此 ID 并显示您的视频。
访问它的实例
您可以使用 iPhone 在此处 有关 youtube iframe 的更多信息
YouTube HTML5 视频播放器
I am not sure if this is what you need. A live example on jsbin.com would help. Anyway I hope the following be useful.
You can use the iframe method that youtube provides to play its videos. If the browser supports html5 will show the video with it, otherwise with flash. Also it plays perfect with iphone/ipad without open the app of iphone/ipad.
You can use the following code as an example <
iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/bIPcobKMB94" frameborder="0">
in the above example the video id is bIPcobKMB94. You can change this id and show your video.
You can access with your iphone a live example of it here
More infromation for youtube iframe
YouTube HTML5 Video Player
遗憾的是,ipad 和 Iphone 不显示 Flash 内容。它使用 h.264 版本的视频。
因此,它是一个完全不同的插件,实际播放内容并且设置 Flash 文件的 Wmode 不会有任何区别。
编辑
我查了一下,没有解决 ipad/sefari/iphone 问题。
The ipad and Iphone unfortunatly don't display flash content. It uses the h.264 version of the videos.
Therefore its an entirely different plugin that actually plays the content and setting the Wmode of the flash file won't make any difference.
EDIT
I've looked and I've no solution for the ipad/sefari/iphone problem.
我也遇到了这个问题。 添加参数
"wmode=transparent"
后为代码
,
问题已解决。
I encountered this problem as well. After adding parameter
"wmode=transparent"
for the code<iframe width="480" height="360" src="http://www.youtube.com/embed/111111?wmode=transparent" frameborder="0" allowfullscreen></iframe>
,the problem is fixed.
我怀疑用于切换内容的应用程序正在设置内联 z 索引级别。我会找到该元素(按钮或其容器)的 id 并将 z 索引设置为低于菜单 z 索引。请务必在值后面包含“!important”,以确保它覆盖内联样式。
I suspect that the application used to switch out the content is setting a z-index level inline. I would find the id of that element (the button or it's container) and set the z-index to lower than you menu z-index. Be sure to include '!important' after the value to ensure it overwrites the inline style.