CODEWITHSUNDEEP
htmlcssjwplayer
Ken
Ken

Reputation: 217

Separate controls bar from video content area in JWPlayer

I'm using JWPlayer to play my videos. Is there anyway to separate the controls bar from video content as below design:

enter image description here

Or any ways to add a margin/padding to create this white space. I tried to inspect that object to change css but maybe it's a blockenter image description here

Thanks, Ken

Upvotes: 1

Views: 234

Answers (1)

Francesco
Francesco

Reputation: 1148

The controlbar remain inside the player div, but we can change width and height of each element inside the div.

This is a first example: 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
});

Another solution is to build a custom controlbar using JS API, so you can use that controlbar where you want

Upvotes: 1

Related Questions