Question

我在公司的SP网站上使用“ videojs”插件创建了视频网格。问题是我无法正确调整“播放按钮”的大小，因为CSS文件中的“ width”属性不适用于该按钮。

我已经尝试了在论坛上阅读的一些内容：显示：块; （也尝试过flex）清楚的最大宽度和宽度相结合

但是它们似乎都不起作用。

我将HTML链接到的CSS文件具有以下内容：

.vjs-big-play-centered .vjs-big-play-button {
  display: block;
  width: 100%;
  max-width: 50px;
  height: 50px;
  overflow: hidden;
  font-size: 3em;
  border: 1px solid #fff;
  border-radius: 0.3em;
  left: 50%;
  top: 50%;
}

显示视频的HTML代码为：

<video id='my-video' class='video-js vjs-big-play-centered' controls preload='auto' width='288' height='216'
  poster='https://comunidad.mercantilandina.com.ar/sites/MesadeAyuda/Descargas/Thumbnail-Instructivos/Celulares/Acceso%20a%20datos%20celular.png' data-setup='{}'>
    <source src='https://comunidad.mercantilandina.com.ar/sites/MesadeAyuda/Videos/Abrir%20carpeta%20en%20outlook.mp4' type='video/mp4'>
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>

该按钮应为50px * 50px正方形，但它将显示为矩形（高度正确）。

Answer 1

我发现该按钮受SharePoint环境中的父CSS文件影响（输入按钮的“最小宽度”属性）。我通过仅在该特定页面中“覆盖”该CSS属性解决了该问题。感谢您的所有帮助！

Width属性不适用于VideoJS播放按钮

1 个答案: