Isolating the controls bar from the video content area within JWPlayer

Question

Isolating the controls bar from the video content area within JWPlayer

Currently, I am utilizing JWPlayer for my video playback needs. I am curious if there is a method to separate the controls bar from the video content, similar to the design showcased in this link: https://i.sstatic.net/bZUA9.png

Alternatively, are there any techniques available to add margin or padding to generate white space between the controls bar and video content? I attempted to inspect the object in order to modify the CSS, but it seems that it may be a block element. You can view the image by following this link: https://i.sstatic.net/yWsYH.png

Thank you, Ken

html css jwplayer

Answer 1

Answer №1

The controlbar is confined within the player div, allowing for customization of the width and height of its elements.

For instance, here is a demonstration: http://codepen.io/fdambrosio/pen/rmJGrq

Sample 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 ;
}

JavaScript:

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

Alternatively, you can create a custom controlbar using the JS API to place it wherever needed.

Answer 2

The controlbar is confined within the player div, allowing for customization of the width and height of its elements.

For instance, here is a demonstration: http://codepen.io/fdambrosio/pen/rmJGrq

Sample 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 ;
}

JavaScript:

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

Alternatively, you can create a custom controlbar using the JS API to place it wherever needed.

Isolating the controls bar from the video content area within JWPlayer

Answer №1

Similar questions

Is it possible to incorporate both a file input and text input within a single form?

What is the best way to save and reload a canvas for future use?

Contrasting onevent with addEventListener

How can triple nested quotes be utilized within Django templates?

How can I insert a item into an Array using JavaScript code?

Liquid backdrop centered immobile elements

Setting elements relative to a div can be achieved by using CSS positioning properties

What is the best way to position text below an image icon in a menu?

File remains visible after deletion upon refreshing the page, but disappears after using the Ctrl + F5

Having trouble with spawning child processes asynchronously in JavaScript

React state update not triggering a component re-render

What is the best way to keep tab content fixed when switching?

What is the best way to choose a specific div within a container that contains additional HTML elements?

Is There a Workaround for XMLHttpRequest Cannot Load When Using jQuery .load() with Relative Path?

Send a collection of list items from the client to a Spring MVC controller

Converting HTML's nested <ul> element into JSON format

Can a child element be positioned above its parent's y-scrollbar using CSS?

Tips for adjusting image dimensions with url() method in css

Unable to Scroll HTML Division

The modal remains closed: Error - Attempting to access property 'open' of undefined