Width屬性不適用於VideoJS播放按鈕

Question

我在公司的SP網站上使用“ videojs”插件創建了視頻網格。 問題是我無法正確調整“播放按鈕”的大小，因為CSS文件中的“ width”屬性不適用於該按鈕。

我已經嘗試了在論壇上閱讀的一些內容：display：block; （也嘗試了flex）clear：兩者； 最大寬度和寬度相結合

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

我將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屬性解決了該問題。 感謝您的所有幫助！