Question 44981 in Html Question posted in
Some basic documentation can be found here.

increase video js height but not background – Html

I have a video using video.js on a pc the video covers the whole screen (height & width) on mobile size its just a small hight and the black background covers the rest.

How do I change the actual size of the video to fill 100% of height of a mobile screen so the plain black background can’t be seen?

Code I have tried is below.

  <div class="top">
        <video id="my-video" class="video-js" responsive="true" height="100%" object-fit="cover" autoplay="true" preload="true" responsive="true"
            loop="true" data-setup='{"fluid": true}' muted>
            <source  src="images/Untitled.mov" type="video/mp4" />
            <source src="images/Untitled.mov" type="video/webm" />
        </video>
        <script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script>
    </div>

.top {
    width: 100%;
    height: 100vh;
}

.video-js {
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -50;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin-top: -95px;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    data-setup='{"fluid": true}' was removed and then filled the space I set


  2. 0 
    #my-video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

    This should be work. You may also want to remove the height="100%" and responsive="true" attributes from the video tag, as they may interfere with the CSS styles.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search