I want to fit the video to the screen-CodePudding

<!DOCTYPE html>
<html>
  <head>
  <style>
    .videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
</head>

  <body>
    <div id="playerContainer" >
    <script>
      const config = {
        sources: [
          {
            type: 'hls',
            src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
          }
        ],
      };

      const element = document.getElementById('playerContainer');
      const player = IndigoPlayer.init(element, config);
          </script>
    </div>
  </body>
</html>

I want to fit the video to the screen and scrolling needs to be disabled. But instead of being full screen it is overflowing from the screen. Where am i doing wrong?

CodePudding user response：

Make the <body> element have a class where position: relative , width: 100% and overflow: hidden are declared or use the inline style="..."

After doing this the video should take the width of the parent with a relative position.

CodePudding user response：

The solution can be this:

Added position:fixed; in css
Added height:100%; in css
Added background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center; in css
Added background-size: 100%; in css

Know Issues

NavigationUI visible only in full screen mode (F11 or F) given of the script (Need to change the script to fix these) but it still work.

Final Code

<!DOCTYPE html>
<html>
  <head>
    <style>
    .videosize {
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center;
    background-size: 100%;
    }
    </style>  
  </head>

  <body>
    <div id="playerContainer" >
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>

 <script>
      const config = {
        sources: [
          {
            type: 'hls',
            src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
          }
        ],
      };

      const element = document.getElementById('playerContainer');
      const player = IndigoPlayer.init(element, config);
          </script>
    
  </body>
</html>