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

相信很多草根站长都有视频的功能吧~
同样,我的网站也有视频。我的视频是放到优酷上面的,使用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

发表评论

登录后才能评论