网站嵌入优酷视频设值播放器高度随宽度动态变化的方式

有时候我们会往我们的网站嵌入视频，增加内容的丰富性。优酷是一个不错的视频源，但是今天在使用优酷视频云工具生成的代码，在电脑的浏览器能正常显示，在手机上显示不正常，原因是工具生成的宽高是固定的，所以我们要动态设置播放器div的高宽，达到宽度或高度自适应的效果。

工具生成的代码如下

<div id="youkuplayer"style="width:580px;height:326px"></div>
<script type="text/javascript" src="//player.youku.com/jsapi"></script>
<script type="text/javascript">
var player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: '替换成你的应用ID',
vid: '替换成优酷视频ID',
newPlayer: true
});
</script>

工具生成的代码宽度固定580px,高度固定326px，有时候这个默认设置可能不满足我们的需求，布局上不一定美观。

修改后的代码

<div id="youkuplayer" style="width: 100%;"></div>
<script id="_youkujs_" type="text/javascript" src="//player.youku.com/jsapi"></script>
<script type="text/javascript">
var $youkuplayer = document.getElementById("youkuplayer");
var width = $youkuplayer.scrollWidth;
$youkuplayer.style.height = (width > 600 ? 326 : width * 6 / 9) + "px";
player = new YKU.Player('youkuplayer',{
styleid: '0',
client_id: '替换成你的应用ID',
vid: '替换成优酷视频ID',
newPlayer: true,
autoplay: true
});
</script>

修改后的代码为宽度自适应100%，高度使用js控制，当宽度大于600时使用默认的326，否则高度是宽度的6/9，这样效果会好一些。下面这篇文章就是是视频链接效果：森系复古小盒子包包女时尚迷你斜挎包草编单肩包小挎包。