How to set Videojs size by percentage

Asked

Viewed 59 times

0

I would like to define the size of Videojs as for example 40% equal if defined by CSS, and that when the browser size is changed, it adapts the new percentages.

So far I have it

    <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>
css videojs

1 answer

1


You can leave it with 100% and adjust the container by 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>

this way, the video will adjust as the parent div.

Browser other questions tagged css videojs

You are not signed in. Login or sign up in order to post.