投稿

动态计算视频窗口的高度自适应电脑和移动端

Vedu • • 程序开发 • 阅读 1061

相信很多草根站长都有视频的功能吧~
同样，我的网站也有视频。我的视频是放到优酷上面的，使用iframe的方式引用。但是复制下来的代码不尽如人意，移动端自适应没有那么理想。我的目标就是让这个iframe能够再各个端都能以16:9的宽高进行展示。网上也搜了很多方法，但是都不是很理想。最后还是只能拿出珍藏已久的jQuery大法了。
首先要给你的iframe外层嵌套自适应框架的,我使用的是layui

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的高度了。效果还可以的哦。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/17245.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-12-10 07:38
下一篇 2020-12-11 07:38

相关推荐

发表评论

登录后才能评论