mediaelement.js - ＆gt;更大的按钮？

Question

我正试图让ipad / android的控制栏更大。特别是全屏 按钮。当改变css时它更大但是对整个矩形起作用，例如 有什么想法吗？

vale Valentijn

Answer 1

此解决方案仅限css。

我只需调整背景大小和背景位置属性，就可以调整媒体查询中的所有元素，也可以调整按钮css sprites / background图像。

以下样式仅适用于播放，暂停，全屏和不屏幕按钮，但您可以获得重点，并且应该能够完成缺少的按钮。

@media only screen and (min-width : 1824px) {

  .mejs-container .mejs-controls {
    height: 60px;
  }
    .mejs-container .mejs-controls div {
      width: 60px;
      height: 60px;
    } 
    .mejs-controls .mejs-time-rail span {
      height: 40px;
    }    
    .mejs-container .mejs-controls .mejs-time {
      height: 40px;
    }    
      .mejs-container .mejs-controls .mejs-time span {
        font-size: 20px;
        line-height: 40px;
      }    
    .mejs-controls .mejs-button button {
      width: 46px;
      height: 46px;
      background-size: 400px;
    }    
      .mejs-controls .mejs-play button {
      }    
      .mejs-controls .mejs-pause button {
        background-position: 0 -44px;
      }    
      .mejs-controls .mejs-fullscreen-button button {
        background-position: -90px 0;
      }    
      .mejs-controls .mejs-unfullscreen button {
        background-position: -90px -44px;
      }
}