Javascript 无法使用konva重新调整视频窗口的大小

我在网页中包含视频，我不想使用视频控制循环。因此，我编写了正常的js来暂停、播放和停止。 每当我尝试播放视频时，视频窗口超出屏幕大小，无法重新调整大小。我尝试使用css调整大小，但它不起作用。 这是剧本

  <script>
  var width = window.innerWidth;
  var height = window.innerHeight;

  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
  });

  var layer = new Konva.Layer();
  stage.add(layer);

  var video = document.createElement('video');
  video.src ='carlavideo.mp4'
  var image = new Konva.Image({
    image: video,
    draggable: true,
    x: 50,
    y: 20,
  });
  layer.add(image);

  var text = new Konva.Text({
    text: 'Loading video...',
    width: stage.width(),
    height: stage.height(),
    align: 'center',
    verticalAlign: 'middle',
  });
  layer.add(text);

  layer.draw();

  var anim = new Konva.Animation(function () {
  }, layer);

  video.addEventListener('loadedmetadata', function (e) {
    text.text('Press PLAY...');
    image.width(video.videoWidth);
    image.height(video.videoHeight);
  });

  document.getElementById('play').addEventListener('click', function () {
    text.destroy();
    video.play();
    anim.start();
  });
  document.getElementById('pause').addEventListener('click', function () {
    video.pause();
    anim.stop();
  });
  document.getElementById('stop').addEventListener('click',function(){
         video.currentTime = 0;
          video.load();
  })

</script>

我用的按钮在这里

    <div class="jumbotron">
          <div class="container">
            <h1 class="display-4">Game Controls</h1>
            <hr class="my-4">
            <button id="play" class="btn btn-success  ">Play</button>
            <button id="pause" class="btn btn-warning butt">Pause</button>
            <button id="stop" class="btn btn-danger butt">Stop</button>
          </div>
  </div>

---

我通过创建一个css类并将其包含在web视频播放器中解决了这个问题