html5移动端引入优酷视频iframe自适应

最新推荐文章于 2022-09-17 18:13:28 发布

原创最新推荐文章于 2022-09-17 18:13:28 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#视频 #html5 #自适应 #iframe

web前端专栏收录该内容

46 篇文章

订阅专栏

本文介绍如何使用JavaScript实现在不同屏幕宽度下自适应调整视频播放器的高度，并保持16:9的固定比例，确保用户体验不受屏幕大小影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、要引入的视频

<iframe height=498 width=510 src="http://player.youku.com/embed/XMTI4MjU5OTA3Mg==" frameborder=0 allowfullscreen></iframe>

2、css里设置iframe的宽度为100%

3、根据屏幕宽度自适应，这里我设定视频16/9的固定比例

window.onload = window.onresize = function () {
    resizeIframe();
}
var resizeIframe=function(){
    var bodyw=document.body.clientWidth;
    for(var ilength=0;ilength<=document.getElementsByTagName("iframe").length;ilength++){

        document.getElementsByTagName("iframe")[ilength].height = bodyw*9/16;//设定高度

    }
}