<!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>
    <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 code I want volume slider in order to control videoPlayer volume how can i do this the volume range should be 0 to 100