chrome浏览器中div被embed标签遮住

最新推荐文章于 2021-11-26 10:01:18 发布

原创最新推荐文章于 2021-11-26 10:01:18 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #embed

web 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了一种解决嵌入式视频控件遮挡问题的创新方法，通过在外层套一层div，利用iframe遮罩视频控件，并调整各元素的z-index层级，实现了视频播放区域的清晰展示。

不同浏览器可能通过更改 wmode='transparent'属性来解决这一问题，

我碰到的就是更改各种属性或者index都无效，被这个问题困扰了几天。。

最后的解决办法：

将embed标签外面再套一层div，通过iframe来遮罩视频控件，最后把要显示的div显示在iframe上!

embed标签外的div设置z-index为1，iframe的z-index为2，要显示的div的z-index比2大就行。

iframe代码:

<iframe id="dialog" style="position:absolute; z-index:2;width:150px;height:100px;background: none; opacity: 0.1;left:100px;display:none;"></iframe>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

-飘摇-

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

div被iframe遮住的几种情况及解决办法

hdxx2022的博客

08-02

773

在ie中，iframe里引入video视频播放会导致div的z-index无效，即div的z-index无论设为多少，均被iframe遮住。当div使用透明的背景时，无论是使用（opacity或者rgba格式），除了chrome，其它浏览器都出现div被iframe遮住的情况。本文给大家介绍了div被iframe遮住的一些情况，以及被遮住后的解决办法，有需要的朋友们可以参考借鉴。指定iframe调用的文件或图片(html,htm,gif,jpeg,jpg,png,txt,*.*)第一种：透明背景被遮住。

IE中div被视频遮住(用embed来内嵌视频)的解决方法

01-19

使用embed来内嵌视频，因为视频是windows media player，上面想用div浮动一些内容，之前尝试了一些方法，比如 1. 通过设定不同组件的z-index值 2. 通过设定 wmode值结果都没有效果。最后设定了windowlessVideo=1，终于解决问题。具体说明一下： “windowlessVideo”属性如为true，则设置成无窗口模式，视频可直接显示在你指定的区域，上面可以叠加文字或其他效果；如为false，则显示完整的media player窗口。这个应该是windows media player的特有属性具体参照 http://tech

2 条评论您还未登录，请先登录后发表或查看评论

2 条评论

昨晚没下雨 2019.03.31
代码能截的完整点吗？试下下你说的方法不行
- -飘摇-回复昨晚没下雨 2019.07.19
  [reply]xspaigtj[/reply] 就是一个绝对定位的iframe叠在video上

embed遮挡div层，无法显示

热门推荐

希望能找到你的答案

04-21

14万+

例如代码：

【HTML】html中embed标签会遮盖其他部分的解决方法

catshitone的专栏

08-15

4531

可以直接设置 embed 标签的 wmode=’ transparent’ 属性这样就可以使弹出层遮盖住 flash了.(该属性一般的作用是使flash透明即可以使flash下面的背景透出来前提是flash自身是透明的)

html页面里插入embed视频标签，遮罩住其他div的解决

weixin_33717298的博客

05-31

733

<param name="wmode" value="opaque" /> <embed wmode="opaque"></embed> 转载于:https://www.cnblogs.com/smallthen/p/6923155.html

Firefox下div层被Flash遮住的解决方法

09-25

在网页设计中，有时会遇到一个常见的问题：在Firefox浏览器中，HTML的div元素会被Flash内容遮挡，导致div层无法正常显示。这个问题主要是由于Flash的渲染方式导致的，但有几种方法可以解决这一问题。首先，我们来...

浏览器跨平台使用div等标签盖住flash的另类实用解决方法

12-13

首先，避免使用`<a>`标签直接包裹`<object>`或`<embed>`标签，这样在某些浏览器中会导致点击事件无法正常工作。正确的方法是让`<a>`标签与Flash元素成为同级元素，即兄弟关系。这样，我们可以独立控制`<a>`标签的...

HTML5 embed标签定义和用法详解

12-14

在HTML4.01标准中，`<embed>`标签并不是一个正式的元素，但在实际使用中被广泛接受。而在HTML5中，它被正式纳入标准，赋予了更多的规范和功能。在HTML5中，`<embed>`标签的主要属性包括： 1. `src`：这是最重要的...

当embed遮挡住弹出框，该如何设置

liuyongfang0211的博客

04-25

1051

网页上用embed标签，用来播放视频，但是发现弹出框无法显示，在embed插件的下面，看不见。此时设置windowlessVideo="true" “是否无窗口视频”属性如为true，则设置成无窗口模式，视频可直接显示在你指定的区域，上面可以叠加文字或其他效果；如为false，则显示完整的media player窗口。 <embed src="name.avi" type="v...

使用embed标签嵌入wmode解决网页当中flash遮挡页面元素的问题

mhx123456789的博客

08-23

162

使用embed标签嵌入wmode解决网页当中flash遮挡页面元素的问题

页面上插入视频播放器时，经常会遇到视频挡住js弹框的问题：

u010191806的专栏

05-04

1424

页面上让Flash不档住浮动对象或层的关键属性： "wmode" value="opaque" />//IE下生效 "opaque">//FireFox下生效 --> "application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400"> "movie" value="style/f

JS样式弹出框的提示框被遮挡如何解决，图片代码楼下

moerning的博客

05-17

3830

embed如何在Chrome浏览器上使用

Anxking的博客

11-13

1678

与HTML4相比，HTML5新增加了许多的标签，其中就包括embed标签，这个标签其实是一个内嵌的标签，可以在标签中加入视屏，动态图等内容，像swf格式的文件，可以在embed里面使用，但这个就面临一个问题，embed的说明文档中，是可以兼容IE，火狐和Chrome浏览器的，但是实际上却不行，经过小编和同学的探讨，得出了一个解决的方法: 在应用商店中下载一个叫Flash中心的软件，在这个软件中下载兼容Chrome内核的Flash，这样在运行swf文件的时候就不会显示无法加载...

pdf显示禁用工具栏 & iframe、object、embed引用区别

weixin_44867717的博客

11-26

6517

pdf显示禁用工具栏 & iframe、object、embed引用区别国内主要视频网站的嵌入方式 iframe、object、embed引用有什么区别，要在父页里显示子页的内容，里面那种方法更好？ <iframe src= "test.html" width= "100%" height= "100% "> </iframe> <embed src= "test.html" width= "100% " height= "100% "> </em

chrome 下视频全屏播放后自定义控件无法使用的问题探究

weixin_33739627的博客

06-08

786

chrome 63 升级到 64 后，我司旗下产品讲堂出现了一个说大不大说小不小的 bug：自定义控件在全屏模式下失效了。将代码简化如下： <html> <body> <video src="http://www.w3school.com.cn/i/movie.mp4" controls="controls" loop="loop"></vi

div显示在object、embed插件之上

明明

06-27

1万+

最近做个项目，要求在embed内容可以被div遮挡，实际上就是个播放器，当div移到插件上面时候不会被播放的内容挡住，搜寻了很久才勉强找到了个不完美的解决方案。这里先介绍下在embed会遮挡住div的原因：我们平常所做的plugin无非两种，有窗体的和无窗体的，有窗体的插件是不透明的（opaque）将会遮挡其他部分，其优先级在页面中也较高，一般的DOM元素都要被其遮挡，这个时候设置