Js+Css 控制iframe内容自动缩放_iframe中的内容自动缩小-优快云博客

本文链接：https://blog.youkuaiyun.com/admans/article/details/80374061

本文介绍了一种使用JavaScript实现的自适应视频播放器布局方案，该方案能够根据屏幕尺寸调整YouKu视频嵌入框的大小，确保在不同设备上都能获得良好的观看体验。

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

竖屏

横屏效果

<div class="h5box">         
<iframe src="http://player.youku.com/embed/XMTI4MjU5OTA3Mg==" frameborder="0" width="1280px" height="720px"></iframe>
</div>

<script type="text/javascript">

if(window.addEventListener){
  window.addEventListener("load",fixIframe,false);
  window.addEventListener("resize",fixIframe,false);
}
else{
  window.attachEvent("onload",fixIframe);
  window.attachEvent("onresize",fixIframe);
}


function fixIframe(){
var box=document.querySelector(".h5box");
var frame=box.querySelector("iframe");
var screenWidth=window.outerWidth||document.documentElement.clientWidth;
var screenHeight=window.outerHeight||document.documentElement.clientHeight;
var movieWidth=parseInt(frame.width||frame.style.width);
var movieHeight=parseInt(frame.height||frame.style.height);
var vScale=screenHeight/movieHeight;
var hScale=screenWidth/movieWidth;

var scale=Math.min(vScale,hScale,1);
 

var frameLeft=movieWidth*(scale-1)/2;
var frameTop=movieHeight*(scale-1)/2;

frame.style.transform="scale("+scale+")";
frame.style.webkitTransform="scale("+scale+")"; 
frame.style.mozTransform="scale("+scale+")"; 
frame.style.left=frameLeft;
frame.style.top=frameTop;
frame.style.margin="auto";
frame.style.position="relative";

box.style.width="100%";
box.style.height=movieHeight*scale;
box.style.overflow="hidden";
box.style.minHeight=movieHeight*scale;
box.style.textAlign="center"; 
}
</script>