index.html

<!doctype html>
<html lang="de">

  <head>
    <meta data-react-helmet="true" charset="utf-8"/>
    <title>Ausstellung-Virtuell | Folge und Varianz</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/player.css">
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
  </head>

  <body>

    <div class="container">
      <logo>
        <img class="logo" src=images/logo.png>
        <img class="burger_menu" id="burger_menu" src=images/menu.png>
      </logo>
      <navigation>
        <ul>
          <li><a href=overview.html>Werkübersicht</a></li>
          <li><a href=about.html>Über das Projekt</a></li>
        </ul>
      </navigation>
      <map>
        <div id='map' style='width: 100%; height: 100%;'></div>
      </map>
      <content>

        <div id="video-container">
          <video id="video" width="100%" height="100%">

            <!-- Video here -->
            <source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
              <p>Error: your browser doesn't support HTML5 video.</p>
            </video>

            <!-- Markup to replace default interface -->
            <div id="video-controls">
              <div class="controls">
                <button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
                <div class="seek-bar-wrapper" id="seek-bar-wrapper">
                  <input id="seek-bar" type="range" value="0" step="0.001">
                </div>
                <p id="timeDisplay" class="time"><span id="timeCurrent" class="current">00:00:00</span> / <span id="timeDuration" class="duration">00:00:00</span></p>
                <button type="button" id="mute" class="text mute">100</button>
                <input type="range" id="volume-bar" value="100">
                <button type="button" class="icon full-screen" id="fullscreen"><span class="icon-screen" aria-hidden="true"></span></button>
                <div class="clearfix"></div>
              </div>
            </div>
        </div>

        <div class="description">
          <h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
          <p class="prose-big">Bla bla</p>
          Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
        </div>
      </content>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/player.js"></script>
    <script src="js/map.js"></script>

  </body>

</html>