Flowplayer 播放器的宽度其实就是播放器容器的宽度… 播放器的高度会根据一定的比例自动去设置 … 默认这个比例是0.5625 … 也就是 16:9 …

设置播放器的尺寸，一般我们不去设置它的固定的高度 .. 而是去设置这个比例的值 …

如果你想让播放器的高度正好是视频的高度 .. 你可以用视频的高度除以视频的宽度 … 把得到的值，设置为播放器的比例就可以了。

设置这个比例有几种方法 … 我们来看一下 …

使用 data 属性设置

这里我们直接把这个比例值使用 data 属性，放在播放器的容器上面 ..

在 .ninghao-player 所在的 <div> 标签上 … 输入 data-ratio=""

用这个属性来设置播放器的比例 … 我们要播放的视频高度是 544 像素 … 宽度是 1280 像素 ..

544 / 1280 … 结果是 0.425 …

所以我们可以把这个 ratio 的值，设置为 0.425

保存 …

打开浏览器 … 你会发现 … 现在播放器的尺寸正好是视频的尺寸 …

因为我们设置的是比例，而不是固定的宽度 … 所以当我们改成播放器宽度的时候 …. 播放器的高度会使用这个比例去缩放 …

所以播放器永远都会是正确的尺寸 …

使用 CSS 设置

除了可以使用 data-ratio 属性去设置播放器的比例，我们还可以通过 CSS 来设置 ….

先去掉这个 data-ratio 属性和它的值 ..

然后在网页的样式表里，或者直接在页面上的样式里去定义这个比例的样式 ..

样式的选择器可以使用我们在播放器容器上定义的 css 类 … 再加上 .fp-ratio 这个类 …

.ninghao-player .fp-ratio {}

然后设置一下 padding-top … 它的值应该是一个百分比 … 0.425 换成百分比的形式，应该是 42.5% ..

.ninghao-player .fp-ratio{
padding-top: 42.5%;
}

保存 … 再回到浏览器 …

（#改变尺寸）同样 … 播放器的尺寸可以使用正确的比例去缩放 …