On small display areas the big play button makes interacting with controls difficult

[theMusician]

This was discovered while using Drupal 10's media library. On smaller displays, the big play button covers the video controls and other metadata presented to the user.

One idea is to use a media query on the big play button styles to simply not display the big button at very small sizes. I can submit a PR if this approach makes sense. Alternatively, could it scale with the viewport size?

Starting at line 120 of /styles/ableplayer.css

/*
  In small display areas, the big play button actually obscures
  the controls making it difficult to select player options.
*/
@media (max-width: 270px) {
  .able-big-play-button { display:none; }
}

@media (min-width: 271px) {
  .able-big-play-button {
      position: absolute;
      font-size: 8em;
      color: #fdfdfd;
      background-color: transparent;
      border: none;
      outline: none;
      left: 0;
      top: 0;
      padding: 0;
      z-index: 6500;
      /* 
        Opacity value chosen to achieve a 
        contrast ratio of 5.63 in the worst case.
      */
      opacity: 0.75;
      filter:alpha(opacity=75); /* for IE */
  }
}

[terrill]

@theMusician for consistency across devices, I'm inclined to scale it with the viewport size rather than hide it altogether. If you're willing to submit a PR, that would be great. Thanks!