日期:2014-05-16  浏览次数:20397 次

站外引用的优酷视频,怎样让视频高度自适应?
站外引用优酷视频,宽度好解决,width="100"就能自适应,但是高度用height="100%",实际高度只有150PX左右。我想要的效果是宽度与高度比是16:9,怎样实现?就像ipc.me这个网站里的视频一样( http://www.ipc.me/meizu-mx3-review.html ),无论浏览器窗口大小怎么调都能自适应,宽高比总是固定的

优酷代码如下:

<iframe height="100%" width="100%" src="http://player.youku.com/embed/XNjA3NjQ0MzE2" frameborder=0 allowfullscreen></iframe>

------解决方案--------------------
引用:
Quote: 引用:

站外引用优酷视频,宽度好解决,width="100"就能自适应,但是高度用height="100%",实际高度只有150PX左右。我想要的效果是宽度与高度比是16:9,怎样实现?就像ipc.me这个网站里的视频一样( http://www.ipc.me/meizu-mx3-review.html ),无论浏览器窗口大小怎么调都能自适应,宽高比总是固定的

优酷代码如下:

<iframe height="100%" width="100%" src="http://player.youku.com/embed/XNjA3NjQ0MzE2" frameborder=0 allowfullscreen></iframe>

让框架高度自适应
http://younglab.blog.51cto.com/416652/284210

http://younglab.blog.51cto.com/416652/284210
------解决方案--------------------
 ipc.me里大小好像也是固定写好的

<div style="width:320px;height:180px" >
 <iframe height="100%" width="100%" src="http://player.youku.com/embed/XNjA3NjQ0MzE2" frameborder=0 allowfullscreen></iframe>
</div>

------解决方案--------------------
window.onresize中依据视窗大小重新设置iframe的大小就好了吧