关于腾讯视频遮住div解决办法

最新推荐文章于 2020-03-24 11:14:09 发布
原创 最新推荐文章于 2020-03-24 11:14:09 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #jquery #视频 #腾讯 #优酷

本文介绍了一种解决第三方视频（如腾讯视频、优酷视频）遮挡页面中position:fixed元素的问题的方法。通过在视频播放代码中设置wmode=Opaque属性，可以使视频不遮挡设置了position:fixed的元素。

在做网页或者专题的过程中，有时候会用到腾讯视频或者优酷视频等第三方视频，我们直接复制第三方分享的视频地址就可以了，但是如果你的页面中有用到  position:fixed 的div，希望div显示在最上层并固定在顶部，那么问题就来了，这个视频就会遮住这个 position:fixed div，曾试过设置“z-index:99999”属性，但起不到任何作用。

后来研究发现，如果视频播放代码里面设置了属性wmode="Opaque"就能很好的解决这个问题，优酷、搜狐、56等视频都是可以的，以下是引用优酷视频的代码：

真确引用视频的代码如下：

<embed src="http://player.youku.com/player.php/sid/XMjM5ODU2Mzcy/v.swf" wmode="Opaque" allowFullScreen="true" quality="high" width="630" height="480" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>


IE中div被视频遮住(用embed来内嵌视频)的解决方法
09-25
本文主要探讨的是在Internet Explorer (IE) 浏览器中，当使用`embed`标签内嵌Windows Media Player视频时，遇到`div`元素被视频遮挡的问题及其解决方案。 首先，我们要理解问题的根源。在HTML中，`div`是一个非常...
div被iframe遮住的几种情况及解决方法
09-28
以下将详细阐述几种DIV被IFRAME遮挡的情况，并提供相应的解决方法。 首先，要了解的是IFRAME是一种HTML元素，它允许在当前HTML文档中嵌入另一个独立的HTML页面。尽管这一特性带来了许多便利，但同时也带来了诸如...
div怎么盖住embed
jiashiyan的博客
06-07 1024
设置embed 属性wmode="transparent"然后设置z-index
视频播放后遮挡问题
bingnan2347的博客
09-14 1859
在项目开发过程中，遇到过视频控件遮挡div的情况，后来在度娘的帮助下解决了这个问题，现在记录一下，以防自己忘记 解决消息框被控件遮挡问题 本人遇到jquery easyui 弹出对话框被activex控件遮挡问题，网上查了下，关于遮挡问题可以用在弹出层div中添加iframe并设置z-index属性的方式解决“就在遮罩生成后用jquery选中遮罩的元素，渲染一个宽度高度都100%的iframe...
html中div层遮住select的方法
就是你的博客
06-10 1821
<br /><div class="content"><br />              <iframe  src="" frameborder="0"  style="position:absolute;   visibility:inherit;   top:0px;   left:0px;   width:expression(this.parentNode.offsetWidth);   height:expression(this.parentNode.offsetHeight);   z-i
IE中div被视频遮住的解决方法
weixin_30516243的博客
08-07 231
使用embed来内嵌视频，因为视频是windows media player，上面想用div浮动一些内容，之前尝试了一些方法，比如 1. 通过设定不同组件的z-index值 2. 通过设定 wmode值 结果都没有效果。 最后设定了windowlessVideo=1， 终于解决问题。 具体说明一下： “windowlessVideo”属性 如为true，则设置成无窗口...
flash遮住div问题的正确解决方法
09-04
本文将详细解释这个“Flash遮住div”问题，并提供一种有效的解决方法。 首先，我们需要理解这个问题出现的原因。Flash在默认情况下，其`wmode`参数设置为`window`，这会使Flash对象作为一个独立的层存在于浏览器的Z...
DIV遮挡问题
03-18
DIV遮挡问题
关于网页视频遮住顶层DIV的解决办法
chuqiecheng9969的博客
10-12 1091
最近做一个网站，要实现的效果是网站顶部有个DIV层一直置顶，CSS样式是这样写的： #header-top{ width:100%; border-top: 2px solid #49C5FF; z-index:99999; position:fixed; top: 0px; ...
embed标签遮住div层
weixin_34409357的博客
10-14 293
2019独角兽企业重金招聘Python工程师标准>>> ...
腾讯视频播放插件Txplayer的使用
wfly blog
03-24 5115
html <div id="mod_player"></div> js var player = new Txplayer({ containerId: 'mod_player', vid: 'a0919rdlm06', width: '100%', height: screen.availHeight / 2, p...
使用 iframe 引用优酷和土豆和腾讯视频，支持 HTML5 手机 播放
热门推荐
beyond__devil的博客
08-21 4万+
写博客，只为记录项目中碰到的问题 使用百度视频上传，嵌入远程链接，然后在编辑器中自动转换为支持视频播放的html代码。 例如： 简单了修改了百度编辑器源码 默认的百度编辑器针对视频的处理有2种： 1.远程链接，会生成 标签 2.本地上传视频，会生成 标签，video是html5的标签，现在大多数浏览器都使用了，但是其支持的格式可能不是很多，具体也没研究，这个工作量太大，而且得不到
ios滚动条被div遮住了
最新发布
07-24
在 iOS 设备上，由于 `-webkit-overflow-scrolling: auto;` 的默认行为，当使用 `overflow: auto` 或 `overflow: scroll` 创建滚动区域时，可能会出现滚动条被其他元素遮挡的问题，尤其是在动态内容或复杂布局中。 ### 解决方案 #### 1. 使用 `-webkit-overflow-scrolling: touch;` iOS 上的滚动性能和交互体验可以通过添加 `-webkit-overflow-scrolling: touch;` 来优化。该属性允许滚动区域在用户滑动时具有原生般的流畅滚动体验，并且滚动条不会轻易被遮挡。 ```css .scroll-container { overflow: auto; -webkit-overflow-scrolling: touch; } ``` 此方法能有效提升滚动区域的交互体验，并在大多数情况下避免滚动条被遮挡的问题[^2]。 #### 2. 确保父元素不会裁剪滚动条 有时，滚动条被遮挡是由于父容器的 `overflow` 设置不当，或子元素的 `z-index` 设置不正确。确保滚动区域的父元素不会意外裁剪滚动条，可以通过以下方式调整： - 避免父元素设置 `overflow: hidden`。 - 确保滚动容器的 `z-index` 高于可能重叠的其他元素。 ```css .parent-container { position: relative; z-index: 1; } .scroll-container { position: relative; z-index: 2; overflow: auto; -webkit-overflow-scrolling: touch; } ``` #### 3. 动态计算高度并触发滚动 如果滚动区域被动态内容影响（如软键盘弹出导致视口变化），可以通过 JavaScript 动态计算高度并触发滚动行为，确保滚动条始终可见。 ```javascript document.querySelector('.scroll-container').scrollTop = document.querySelector('.scroll-container').scrollHeight; ``` 这种方法在用户交互（如点击输入框）后特别有效，可以确保滚动条可见并避免被遮挡[^1]。 #### 4. 使用 `position: fixed` 或 `absolute` 避免重叠 如果某些元素在滚动过程中会遮挡滚动条，可以尝试使用 `position: fixed` 或 `position: absolute` 来重新布局，确保滚动条始终处于可见区域。 ```css .overlay-element { position: absolute; top: 10px; right: 10px; } ``` 通过这种方式，可以避免元素重叠问题，从而防止滚动条被遮挡。 #### 5. 避免嵌套滚动区域 iOS 上的嵌套滚动区域可能会导致滚动行为异常，包括滚动条被遮挡。尽量避免在一个滚动容器内部再嵌套另一个滚动容器。如果必须使用嵌套滚动，确保每个滚动区域都正确应用了 `-webkit-overflow-scrolling: touch;`。 --- ### 总结 iOS 上滚动条被 `div` 元素遮挡的问题可以通过以下方式解决： - 使用 `-webkit-overflow-scrolling: touch;` 提升滚动体验并避免遮挡。 - 检查并调整 `z-index` 和布局，确保滚动条可见。 - 使用 JavaScript 动态调整滚动位置。 - 避免嵌套滚动区域，或确保嵌套滚动区域正确配置。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值