I am facing difficulty in creating a responsive video with custom controls.
While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also responsive. This is because its width is calculated based on the video itself.
I don't want to overcrowd this post by sharing all of my code, but I can provide the link where I found it: Here is the link if you're interested.
The crucial part of the code responsible for these calculations is as follows:
// Get the width of the video
$videoWidth = $this.width();
$that.width($videoWidth + 'px');
// Set the player's width based on specified settings
$that.find('.player').css({
'width': ($settings.playerWidth * 100) + '%',
'left': ((100 - $settings.playerWidth * 100) / 2) + '%'
});
This code applies an inline pixel-based width to the div, which isn't ideal for responsive design. As I lack experience in resolving this issue, I am hopeful that someone may be able to offer some assistance.