竖屏
横屏效果
<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>