shortcodes/video.html

<style>
    .video-player {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .video-controls {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: fit-content;
        flex-wrap: nowrap;
    }

    .video-controls p {
        width: min-content;
    }

    .media-seek {
        width: 100%;
    }

    .video-controls>* {
        margin: 5px;
    }

    .video-controls select,
    .video-controls button {
        background-color: transparent;
        border-color: var(--theme-accent);
        color: var(--theme-accent);
        border-radius: 3px;
        padding: 0.5rem;
    }

    .icon svg {
        width: 2.25rem;
        height: fit-content;
        z-index: -1;
        background-color: transparent;
        pointer-events: none;
    }

    .icon path,
    .icon rect {
        stroke: var(--theme-accent);
        fill: var(--theme-accent);
    }

    .icon svg circle {
        stroke: var(--theme-accent);
        fill: transparent;
        stroke-width: 6;
    }
    .video-player:fullscreen{
        height:100vh;
        width:100vw;
    }
    .video-player:fullscreen video{
        max-height: 100vh;
        height:100%;
        max-width: 100vw;
        width: 100vw;
    }
</style>
<script src="/js/icons.js"></script>
<div class="video-container">
    <div class="video-player">
        <video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)"
            ontimeupdate="setup_video_metadata(event)">
            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
        </video>
        <div class="video-controls">
            <div onclick="toggle_video_play(event)" class="icon">
                <svg  viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg>
            </div>
            </button>
            <input class="media-seek" type="range" onchange="update_video_time(event)" value="0">
            <select onchange="update_video_speed(event)">
                <option value="1" selected>1x</option>
                <option value="1.5">1.5x</option>
                <option value="2">2x</option>
                <option value="2.5">2.5x</option>
                <option value="3">3x</option>
            </select>
            <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
            <div class="icon" onclick="fullscreen(event)">
                <svg  viewBox="0 0 120 120">
                    <path
                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
                        d="M 46.964564,56.005523 29.64354,38.443145 15.744327,51.812481 15.624368,16.779513 l 36.623948,0.03226 -13.177737,14.17536 16.622539,16.392689 z"
                        id="path8948-3"/>
                    <path
                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
                        d="M 55.129887,73.388205 38.422614,90.210417 51.067135,104.89922 16.395468,104.33333 16.434945,67.605641 30.111493,81.28219 46.504182,64.659651 Z"
                        id="path8948-3-5"/>
                    <path
                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
                        d="M 63.363444,46.935211 80.997081,30.825588 67.627745,17.036604 102.68744,17.447746 102.62846,52.646518 88.168059,39.041226 71.989147,55.663767 Z"
                        id="path8948-3-6"/>
                    <path
                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
                        d="M 71.956318,65.743071 91.343851,82.735377 104.06395,70.648701 103.79532,105.13832 69.166628,105.79193 82.579575,93.184265 63.227764,74.368773 Z"
                        id="path8948-3-5-2"/>
                </svg>

            </div>

        </div>
            <script>
                function setup_video_metadata(event) {
                    video = event.target;
                    var seek = video.parentElement.children[1].children[1];
                    seek.min = 0;
                    seek.max = video.duration;
                    seek.value = video.currentTime;
                    details = video.parentElement.children[1].children[3].children;
                    details[0].innerHTML = timeToText(video.currentTime) + "/";
                    details[1].innerHTML = timeToText(video.duration);

                }
                function playthis(event) {
                    if (event.target.paused) {
                        event.target.playbackRate = video.parentElement.children[1].children[2].value;
                        event.target.play();
                        video.parentElement.children[1].children[0].innerHTML = icons['pause'];
                    }
                    else {
                        event.target.pause();
                        video.parentElement.children[1].children[0].innerHTML = icons['play'];
                    }
                }
                function fullscreen(event) {
                    video = event.target.parentElement.parentElement;
                    if (document.fullscreenElement) {
                        document.exitFullscreen();
                        event.target.innerHTML = icons['expand'];
                    }
                    else {
                        video.requestFullscreen();
                        event.target.innerHTML = icons['shrink'];
                    }


                }
                function toggle_video_play(event) {
                    video = event.target.parentElement.parentElement.children[0];
                    if (video.paused) {
                        video.playbackRate = video.parentElement.children[1].children[2].value;
                        video.play();
                        video.parentElement.children[1].children[0].innerHTML = icons['pause'];
                    }
                    else {
                        video.pause();
                        video.parentElement.children[1].children[0].innerHTML = icons['play'];
                    }
                }
                function update_video_speed(event) {
                    video = event.target.parentElement.parentElement.children[0];
                    video.playbackRate = event.target.value;
                }
                function update_video_time(event) {
                    video = event.target.parentElement.parentElement.children[0];
                    video.currentTime = event.target.value;
                }

                function timeToText(t) {
                    hours = 0;
                    minutes = 0;
                    seconds = 0;
                    if (t > 60 * 60) {
                        hours = Math.floor(t / 60 / 60);
                        t = t - hours * 60 * 60;
                    }
                    if (t > 60) {
                        minutes = Math.floor(t / 60);
                        t = t - minutes * 60

                    }
                    if (t > 1) {
                        seconds = Math.floor(t);
                    }
                    text = "";
                    if (hours > 0) {
                        text += hours + ":";
                    }
                    if (minutes > 0 || hours > 0) {
                        if (minutes == 0) {
                            minutes = "00"
                        }
                        if (minutes < 10) {
                            text += "0"
                        }
                        text += minutes + ":"
                    }
                    if (seconds == 0 && (minutes > 0 || hours > 0)) {
                        seconds = "00";
                    }
                    if (seconds < 10) {
                        text += "0";
                    }
                    text += seconds
                    return text;
                }
            </script>
    </div>
    <noscript>
        <style>
            .video-player {
                display: none;
            }
        </style>
        <video controls preload="false">
            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
        </video>
    </noscript>

    <p class="caption">{{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}}
    </p>
</div>