当前位置:网站首页 / 建站 / 正文

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

时间:2021年11月03日 | 作者 : liuhui | 分类 : 建站 | 浏览: 2147次 | 评论 0

阿里云限量代金券 | 此广告位出租25元/月

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

视频及js调用代码

<iframe id="playerBox" src="https://www.mtosz.com/m3u8.php?url=https://mtyy.org/mp4/616e88922ab3f51d91c04415.mp4" width="100%" allowtransparency="true" frameborder="0" scrolling="no"></iframe><script src="/dav/js/videojz.js" type="text/javascript"></script>

下面就是关键的js代码了

var w = $("#playerBox").width();
var h = w*9/16;
$("#playerBox").height(h);

这样就达到了动态赋值计算iframe的高度了。效果还可以的哦。

推荐您阅读更多有关于“”的文章

猜你喜欢

网站分类
关注电脑博士
友情链接

分享:

支付宝

微信