I'm running into this issue with my website on mobile browsers where I'm trying to put a video inside a TV image, and a "Watch" button on top of the video that links to Twitch. And to top it off, the mobile browsers seem to completely ignore the font (I figure I can solve that later).

Here's a snippet of my HTML code that shows the classes:

******

<!-- TV ATTEMPT--> <div class="testingclass"> <img class="tvImageClass" src="UX_UI\TV90S.png" alt="tv" /> <!-- TV Screen Image --> <a href="https://www.twitch.tv/antighfest" class="watchButton"> <!-- Watch button that links to Twitch. Supposed to fit inside TV Image.--> <img src="UX_UI\BUTTONZ\WATCH_BUTTON.png" alt="watch" style="width: 200px; height: auto;" /> </a>

      <video class="trailerVideo" autoplay muted loop playsinline>
        <source src="UX_UI\VIDEO\TRAILERZ\2024 - 24hrz_close_to_final.mp4" type="video/mp4"> <!-- The Video that's supposed fit inside the TV screen image-->
      </video>
      
    </div>

/* For mobile screens smaller than 768px / @media (max-width: 768px) {

  .testingclass {
    position: relative;
    text-align: center;
    height: 100vh;
  }
  .watchButton, .tvImageClass, .trailerVideo {
    position: relative; 
    margin: auto; 
    max-width: 100%; 
    display: block; 
  }

  .tvImageClass {
    /* position: relative; */
    justify-content: center; 
    width: 50px;
    max-width: 50px; 
    height: 50px;
    max-height: 50px;
    object-fit: contain; 
  }

  .trailerVideo {
    /* position: relative; */
    justify-content: center; 
    width: 50px;
    max-width: 50px; 
    height: 50px;
    max-height: 50px;
    object-fit: contain; 
  }