How to set the VideoJS size by percentage

0

I would like to set the size of the VideoJS such as 40% m as defined by CSS, and that when the browser size is changed, it adapts to the new percentages.

So far I have this

    <div class="videoContainer">
    <video id="player" height="281%" width="auto" controls class="video-js vjs-default-skin vjs-big-play-centered"></video>
</div>
<script>
  videojs('player', {
    controls: true,
    nativeControlsForTouch: false,
    responsive: true,
    plugins: {
      ass: {
        'src': ["vjs/002.ass"],
        'delay': 0
      }
    },
    sources: [{"type": "video/mp4", "src": "vjs/002.mkv"}]
  });
</script>
    
asked by anonymous 04.05.2017 / 22:00

1 answer

1

You can leave it with 100% and adjust the container through css:

<div class="videoContainer" style="width: 40%;">
    <video id="player" height="auto" width="100%" controls class="video-js vjs-default-skin vjs-big-play-centered"></video>
</div>
<script>
  videojs('player', {
    controls: true,
    nativeControlsForTouch: false,
    responsive: true,
    plugins: {
      ass: {
        'src': ["vjs/002.ass"],
        'delay': 0
      }
    },
    sources: [{"type": "video/mp4", "src": "vjs/002.mkv"}]
  });
</script>

In this way, the video will adjust according to the parent div.

    
04.05.2017 / 23:08