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;
}