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