<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IEQ Education</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class=" section left ">
      <div class="heading"> Foundations of a
        Healthy Building
      </div>
      <div class="buttons" id="left-buttons">
        <div class="vid-button " onclick="playVideo('./assets/videos/overview.mp4',true)">
          <div><img src="./assets/ieq assets/ieq.png">
            </img>
          </div>
          <div>IEQ Video</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/air.mp4',true)">
          <div><img src="./assets/ieq assets/air.png">
            </img>
          </div>
          <div>Air Quality</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/thermal.mp4',true)">
          <div><img src="./assets/ieq assets/thermal.png">
            </img>
          </div>
          <div> Thermal Health</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/ventilation.mp4',true)">
          <div><img src="./assets/ieq assets/ventilation.png">
            </img>
          </div>
          <div>Ventilation</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/moisture.mp4',true)">
          <div><img src="./assets/ieq assets/moisture.png">
            </img>
          </div>
          <div>Moisture</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/noise.mp4',true)">
          <div><img src="./assets/ieq assets/noise.png">
            </img>
          </div>
          <div> Noise</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/dust.mp4',true)">
          <div><img src="./assets/ieq assets/pestanddust.png">
            </img>
          </div>
          <div>Dust & Pests</div>
        </div>
      </div>

    </div>
    

    <div class="videobar">
      <div class="tool-tip" id="tooltip">
        <!-- <img src="./assets/Tooltiprl.png"> -->
        <p>Please select a video title from either side to play </p>
      </div>
      <div class="sub-container" id="subtitles">
        <div class="subtitle-buttons" style="flex-direction:row;">

          <p>SUBTITLES</p>
        </div>
        <div class="subtitle-buttons">
          <div class="sub-button" onclick="setSubtitles('fre')">FRENCH </div>
          <div class="sub-button" onclick="setSubtitles('jap')">JAPANESE
          </div>
          <div class="sub-button" onclick="setSubtitles('spa')">SPANISH
          </div>
        </div>
      </div>
    </div>
    <div class="logo">
      <img src="./assets/Daikin Logo 1080.png" style="width: 100%;">
    </div>
    <div class="video-container">
      <div class="video-heading"> <strong>I</strong>ndoor <strong>E</strong>nvironment <strong>Q</strong>uality</div>
      <style>
        video::cue {
          font-size: 35px;
          z-index: 1000;
          position: relative;
        }
      </style>

      <video src="" autoplay controls style="display: none; width: 100% ; height:75%" id="videoPlayer"
        class="videosection">
      </video>
      <div id="custom-subtitle" class="custom-subtitle"></div>
      <!-- <img src="./assets/IEQ Background 1.gif" id="gifPlaceholder" style=" width: 100%; height: 75%;" /> -->
      <video id="loopingVideoPlayer" style="width: 100%; height: 75%;" autoplay muted></video>

      <div class="volume-control" style="width: 19%; margin-top: 10px; display: flex; align-items: right;">
        <label for="volumeSlider" style="margin-right: 10px;">Volume:</label>
        <input type="range" min="0" max="100" value="35" id="volumeSlider" style="width: 100%;">
      </div>
    </div>
    <div class=" section right">
      <!-- <div class="heading-right"> IEQ in the
        DC Office</div> -->
      <div class="buttons" id="right-buttons">
       
      </div>

    </div>
  </div>
  <script src="./assets/videos/config.js"></script>

  <script src="script.js"></script>
</body>

</html> this is my html and var volumeSlider = document.getElementById('volumeSlider');
let vidButtonsRight

let selectedSubtitle = null, isSubtitle = true, isVideoPlaying = false;
let subtitleCues = [], currentSubtitleIndex = 0;
const looping_videos = [
  './assets/videos/WELL Cert Video - DSIC IEQ Station.mp4',
  './assets/videos/IAQ in DC Office - Video - DSIC IEQ Station.mp4'
];
let currentVideoIndex = 0;

// initial volume to the slider's value (convert from 0-100 to 0.0-1.0)
videoPlayer.volume = volumeSlider.value / 100;

// volume event listener
volumeSlider.addEventListener('input', function() {
    videoPlayer.volume = this.value / 100;
}); this is my javascript now I am not sure if I need a volume slider that's always visible. Can we have a volume icon at the bottom right instead? and on tap will show and hide the slider? Try to mimic the default volume icon in windows system tray icon