Home > database >  I want to fit the video to the screen
I want to fit the video to the screen

Time:11-30

<!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>
  • Related