米
心情
所有
图集
登录
搜索
原创
动态计算视频窗口的高度自适应电脑和移动端
青鸾信
发布于:2020-12-09
相信很多草根站长都有视频的功能吧~ 同样，我的网站也有视频。我的视频是放到优酷上面的，使用iframe的方式引用。但是复制下来的代码不尽如人意，移动端自适应没有那么理想。我的目标就是让这个iframe能够再各个端都能以16:9的宽高进行展示。网上也搜了很多方法，但是都不是很理想。最后还是只能拿出珍藏已久的jQuery大法了。 首先要给你的iframe外层嵌套自适应框架的,我使用的是layui ``` <div class="layui-col-md8 layui-col-xs12"> <iframe id="playerBox" width="100%" src='https://player.youku.com/embed/XNDcwMjYxOTczMg==' frameborder=0 'allowfullscreen'></iframe> </div> ``` 下面就是关键的js代码了； ``` //计算视频窗口的高度 自适应各端 var w = $("#playerBox").width(); var h = w*9/16; $("#playerBox").height(h); ``` 这样就达到了动态赋值计算iframe的高度了。效果还可以的哦。
注:原创不易,转载请注明出处(
https://micuu.com/new/1086.html
)，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。
最后修改与 2022-02-19
上一篇：
记录一下解决网站问题的过程
下一篇：
穿白色衬衫的可爱女孩 床上看书 美腿 二次元4K动漫壁纸_米醋儿网.jpg
留言反馈
请先登录
问题反馈渠道，如有软件无法下载或者其他问题可反馈。【由于某种原因，目前留言不展示】
用户需要登录后才能留言反馈
立即留言
珍藏视频
10分钟高效燃脂
30天高效瘦脸操
5分钟缓解颈椎操
友人
微博
全民K歌
唱吧
今日头条
悠悠网
科技小锅盖
彼岸桌面
阮一峰
laravel社区
V2ex
掘金
更多>
