I’m trying to make a way to position divs as buttons on this television (img element with videos underneath it) so that when the user changes the size of their browser window, the buttons move with the television element and don’t just move in their own weird scaled way. The buttons are highlighted in pink. Generally, positioning elements for the event of different window sizes has been a pain so any help would be appreciated! Thanks!

<img src="../assets/tvFrame.png" id="frame">
<div>
<video src="../assets/stableBars.mp4" autoplay muted loop id="videoInFrame" height="450px" width="700px"></video>
<video src="../assets/staticFilter.mp4" autoplay muted loop id="staticFilterVideo" height="450px" width="700px"></video>
<h1 id="changeChannel">Change the Channel</h1>
</div>
<div id='channel1'></div>
<div id='channel2'></div>
<div id='channel3'></div>
<div id='channel4'></div>
<div id='channel5'></div>
<div id='channel6'></div>
<div id='channel7'></div>
<div id='channel8'></div>

#channel1 {
    background-color : #f17aff;
    z-index : 30;
    width : 19px;
    height : 7px;
    cursor : pointer;
    position : absolute;
    top : 173px;
    right : 444px;
    animation : blink 1s infinite;
}
#videoInFrame {
    z-index : 15;
    position : absolute;
    top : 150px;
    left : 350px;
    object-fit : fill;
}
#staticFilterVideo {
    z-index : 19;
    mix-blend-mode : screen;
    position : absolute;
    top : 150px;
    left : 350px;
}
#changeChannel { position : absolute; top : 250px; left : 475px; z-index : 18 }
#frame {
    width : 60vw;
    top : -80px;
    left : 20%;
    margin : auto;
    position : absolute;
    z-index : 20;
    text-align : center;
}