css 我要让视频适合屏幕大小

4nkexdtk 于 2022-12-01 发布在其他

关注(0)|答案(2)|浏览(428)

我想使视频适合屏幕，需要禁用滚动。

- 问题：**

而不是全屏，它是从屏幕溢出。
我哪里做错了？

<!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" class="videosize">
    <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>

css

来源：https://stackoverflow.com/questions/74619926/i-want-to-fit-the-video-to-the-screen

2条答案

按热度按时间

d8tt03nd1#

使<body>元素具有声明了position: relative、width: 100%和overflow: hidden的类，或者使用内联style="..."
完成此操作后，视频应采用父级的宽度和相对位置。

赞(0）回复(0）举报 2022-12-01

pkwftd7m2#

- 解决方案如下：**
添加位置：固定;在css中
增加高度：100%;在css中
添加背景：不重复中心中心;在css中
添加背景大小：100%;在css中
- 了解问题**
NavigationUI仅在脚本中给定的全屏模式（F11或F）下可见（需要更改脚本以修复这些问题），但它仍然有效。
- 最终代码**

<!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" class="videosize">
    </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>

赞(0）回复(0）举报 2022-12-01

我来回答

css 我要让视频适合屏幕大小

2条答案

相关问题

热门标签

最新问答