0

I have an Electron desktop app which has a feature of showing a user's local videos in a 'lightbox' using jQuery lightgallery. It's a bit of a complicated setup as I am using an iframe loaded with videojs within lightgallery to present the videos.

I've wrestled with being able to handle videos of varying aspect ratios – settings that work for 16:9 don't work for 4:3, etc.

The best I've got so far is the first image below: the video's aspect ratio is preserved but the "control bar" fills the entire container which lightgallery has provided.

Is there some way to get the "control bar" to size to the width of the video?

Further details
All the videos are loaded dynamically so I don't know their aspect ratios. The first two images below result from using:

<video id="videoPlayer" class="video-js vjs-default-skin vjs-16-9"></video>

I've tried using vjs-fluid or vjs-fill but that resulted in the third image below with the scroll bars.

Video: 4:3

enter image description here

Video: 16:9

enter image description here

Video: 4:3 - Using vjs-fluid

enter image description here

Player set-up code

   var player = videojs("videoPlayer", {
      controls: true,
      autoplay: false,
      preload: 'auto'
    }, function () {
      this.src(videoPath);
      this.poster(posterPath);
      this.load();
    });
spring
  • 18,009
  • 15
  • 80
  • 160
  • Hmm...I'd say that the control-bar in the top example IS sized to the video. Because, I think the real video width is larger than you're thinking. i.e the video width includes vertical black-bars on each side of the viewable area of interest. – David Feb 11 '20 at 15:03
  • @Dave – thanks but that is not the case. The top video is 4:3 aspect ration and there are no black bars in the source. – spring Feb 11 '20 at 15:24

0 Answers0