Canvas 将Video.js插件的高度相应地调整为固定宽度

我是来自bubble.io社区的访问者，我已经在那里发布了此查询。但我认为这是一个相当技术性的问题，不局限于泡沫开发环境。 我试图编辑一个Video.js插件，添加一个选项，调整高度以保持视频的纵横比，并将其调整为选定的宽度（如Pinterest）。通过我所做的研究和测试，我不得不玩弄画布的尺寸。所以我的问题是怎么做

如有任何意见和建议，将不胜感激。提前谢谢大家,

函数（实例、上下文）{

//为元素生成一个随机ID并添加video.js div
var randomId=Math.floor（（Math.random（）*100000）+1）；
var-elementId='vjsElement_u2;'+randomId；
canvas.append（“”）；
instance.data.elementId=elementId；
//包含CSS文件
函数addCSS（文件名）{
var head=document.getElementsByTagName（'head'）[0]；
var style=document.createElement（'link'）；
style.href=文件名；
style.type='text/css'；
style.rel='stylesheet'；
头。附加（样式）；
}
$（文档）.ready（函数（）{
//加载皮肤文件
if（instance.data.skin）{
addCSS（instance.data.skin）；
}
//加载video.js
var-vjsPlayer；
vjsPlayer=videojs（elementId，instance.data.options）；
//触发事件
vjsPlayer.on（'end'，function（））{
triggerEvent（'video_end'）；
});
vjsPlayer.on（'playing'，function（）{
实例.triggerEvent（'video\u playing'）
});
vjsPlayer.on（'pause'，function（））{
实例.triggerEvent（'video\u暂停'）
});
instance.data.vjsPlayer=vjsPlayer；
});

---

}vjs fluid类通常会使播放器大小自动与视频纵横比匹配，但元素上的直接样式具有！重要的是，我们将打破这一局面。删除样式，只需将包含的div设置为所需的宽度或最大宽度。

如前所述，实际容器保留其尺寸

// 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;

});