css - mediaelement.js->较大的按钮？

我正在尝试使ipad / android的控制栏更大。特别是全屏
按钮。当更改css时，它更大，但可以在整个矩形中正常工作，例如
有任何想法吗？

乔瓦伦丁

最佳答案

此解决方案仅是CSS。

我只是通过简单地调整background-size和background-position属性来调整媒体查询中所有元素的大小，以及按钮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;
      }
}