Отрегулируйте высоту плагина Video.js в соответствии с фиксированной шириной

Question

Я посетитель, который пришел из сообщества bubble.io, и я уже разместил там этот запрос. но я думаю, что это довольно технический вопрос, и он не ограничивается средой разработки пузырей. Я пытаюсь отредактировать плагин Video.js, чтобы добавить параметр, который регулирует высоту для поддержания соотношения сторон видео и адаптирует его к выбранной ширине (например, Pinterest). Благодаря исследованиям и тестам, которые я провел, я должен поиграть с размером холста. Итак, мой вопрос как?

кодовая страница плагина

Будем очень признательны за любые советы и предложения. Заранее спасибо,

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;

});

}

Answer 1

В class обычно заставляет размер проигрывателя автоматически соответствовать соотношению сторон видео, но прямые стили в элементе с!important нарушат это. Удалите стили и просто укажите в содержащем div нужную ширину или максимальную ширину.