0

I am a visitor who came from the bubble.io community, and I have already posted this inquiry there. but I think it is quite a technical question and not restricted to the bubble development environment. I am trying to edit a Video.js plugin to add an option that adjusts the height to maintain the aspect ratio of the video and adapted it to a selected width (like Pinterest). Through the research and the tests that I have done, I have to play with the dimension of the canvas. So my question is how?

plugin code page

Any advice and suggestions will be greatly appreciated. Thank you in advance,

function(instance, context) {

// Generate a random ID for the element and add the video.js div
var randomId = Math.floor((Math.random() * 100000) + 1);
var elementId = 'vjsElement_' + randomId;

instance.canvas.append("<div style='width:auto;height:auto'><video id='" + elementId + "' class='video-js vjs-fluid' style=' width:100% !important height:auto !important;'></video></div>");

instance.data.elementId = elementId;

// Include CSS file
function addCSS(filename) {
    var head = document.getElementsByTagName('head')[0];

    var style = document.createElement('link');
    style.href = filename;
    style.type = 'text/css';
    style.rel = 'stylesheet';
    head.append(style);
}
$(document).ready(function() {

  // Load skin file
    if (instance.data.skin) {
      addCSS(instance.data.skin);
    }
 
  // Load video.js
    var vjsPlayer;
    vjsPlayer = videojs(elementId, instance.data.options);

  // Trigger events
    vjsPlayer.on('ended', function() {
        instance.triggerEvent('video_ended');
    });

    vjsPlayer.on('playing', function() {
        instance.triggerEvent('video_playing')
    });

    vjsPlayer.on('pause', function() {
        instance.triggerEvent('video_paused')
    });

    instance.data.vjsPlayer = vjsPlayer;

});

}

Montassar Akrmi
  • 21
  • 1
  • 4

1 Answers1

1

The vjs-fluid class would normally make the player size match the video aspect ratio automatically, but the direct styles on the element with !important will break that. Remove the styles and just have the containing div be the width or max-width you need.

misterben
  • 7,455
  • 2
  • 26
  • 47