{{ $videoId := .videoId }}
<div class="video-container">
    <video
        id="video-{{ $videoId }}"
        class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        preload="none"
        width="100%"
        height="auto"
        poster="/videos/thumbnails/{{ $videoId }}.webp"
        data-setup='{"fluid": true, "responsive": true, "html5": {"vhs": {"overrideNative": true, "enableLowInitialPlaylist": true, "limitRenditionsByPlayerDimensions": true}}, "controlBar": {"pictureInPictureToggle": false}, "playbackRates": [0.75, 1, 1.25, 1.5, 2], "preload": "none"}'>
        <source src="/videos/hls/{{ $videoId }}/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>