{{ $id := .Get "id" }}
<link href="/css/vendor/video-js.min.css" rel="stylesheet">
<script src="/js/videojs/video.min.js"></script>

<div class="responsive-video-container">
  <video 
    id="{{ $id }}"
    class="video-js vjs-default-skin vjs-big-play-centered"
    controls
    preload="auto"
    width="640"
    height="360"
    poster="/videos/hls/{{ $id }}/poster.webp"
    data-setup='{"fluid": true}'>
    <source src="/videos/hls/{{ $id }}/index.m3u8" type="video/mp4">
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
</div>

<style>
.responsive-video-container {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
}
.video-js {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var player = videojs('{{ $id }}');
});
</script>