html - 将控件栏与JWPlayer中的视频内容区域分开

我正在使用JWPlayer播放视频。无论如何，下面的设计会将控件栏与视频内容分开：

或任何添加边距/填充来创建此空白的方法。
我试图检查该对象以更改CSS，但可能是一个块

谢谢，
肯

最佳答案

控制栏保留在播放器div中，但我们可以更改div中每个元素的宽度和高度。

这是第一个示例：
http://codepen.io/fdambrosio/pen/rmJGrq

的HTML：

<body class="playerpage">
  <div id='divplayer'></div>
</body>

CSS：

.playerpage #divplayer {
    background-color: white;
}
.playerpage video.jw-video {
    width: 400px ;
    height: 200px ;
}
.playerpage .jw-controlbar {
    width: 450px ;
    left: 50px ;
}

js：

var playerInstance = jwplayer("divplayer");
playerInstance.setup({
file:'//video...',
width: 544,
height: 306
});

另一个解决方案是使用JS API构建自定义控件栏，因此您可以在需要的地方使用该控件栏