Website-Redesign/layouts/partials/jumbotron.html

{{ if and .IsHome (and (.Site.Params.enableJumbotron | default false) .Site.Data.jumbotron) }}
    {{
        $jumbo_fullscreen := (or 
            (.Site.Data.jumbotron.fullscreen | default false)
            (.Site.Data.jumbotron.backgroundVideo)
        )
    }}
    {{ if .Site.Data.jumbotron.backgroundVideo }}
        <div class="video_container">
            <video
                class="jumbotron_video"
                id="jumbotron_video"
                src="{{ .Site.Data.jumbotron.backgroundVideo }}"
                playsinline
                autoplay mute loop>
                    {{ if .Site.Data.jumbotron.backgroundVideoMp4 }}
                        <source src="{{ .Site.Data.jumbotron.backgroundVideoMp4 }}" type="video/mp4">
                    {{ end }}
                    {{ if .Site.Data.jumbotron.backgroundVideoWebm }}
                        <source src="{{ .Site.Data.jumbotron.backgroundVideoWebm }}" type="video/webm">
                    {{ end }}
            </video>
        </div>
    {{ end }}
    <div class="jumbotron">
        {{ if .Site.Data.jumbotron.image }}
            <img src="{{ .Site.Data.jumbotron.image }}" />
        {{ end }}
        <div class="main_box">
            <h2 class="
                {{ if (.Site.Data.jumbotron.hugeTitle | default false) }}
                    huge
                {{ end }}
            ">{{ .Site.Data.jumbotron.title }}</h2>
            <h3>{{ .Site.Data.jumbotron.subtitle }}</h3>
            {{ if .Site.Data.jumbotron.backgroundVideo }}
                <ul id="play_button_container" style="display: none">
                    <li>
                        <a title="Play" style="border-radius: 100%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center;" class="shareBtn" onclick="playvideo();">  </a>
                    </li>
                </ul>
                <script>
                    var jumbotron_video = document.getElementById('jumbotron_video');
                    var play_button_container = document.getElementById('play_button_container');
                    window.onload = function() {
                        setTimeout(function() {
                            if (jumbotron_video.paused) {
                                play_button_container.style.display = 'block';
                            }
                        }, 1000);
                    };
                    function playvideo() {
                        jumbotron_video.play();
                        play_button_container.style.display = 'none';
                    }
                </script>
            {{ end }}
            {{ if .Site.Data.jumbotron.links }}
                <ul>
                    {{ range .Site.Data.jumbotron.links }}
                        <li>
                            <a class="{{ if .huge }}huge{{ end }}" href="{{ .link | safeURL }}">
                                {{ .title }}
                            </a>
                        </li>
                    {{ end }}
                </ul>
            {{ end }}
        </div>
    </div>
    {{ if (
        and
            $jumbo_fullscreen
            (.Site.Data.jumbotron.downArrow | default false)
    ) }}
        <div class="arrow" onclick="jumpdown();">
            <svg version="1.1" viewBox="0 0 33.867 33.867" xmlns="http://www.w3.org/2000/svg">
             <path transform="scale(.26459)" d="m16 34.346v8c0 2.3545 1.0067 4.4663 2.6152 5.9277l45.385 45.385 45.385-45.385c1.6086-1.4614 2.6152-3.5732 2.6152-5.9277v-8h-8c-2.335 0-4.4287 0.99084-5.8887 2.5762l-0.037109 0.039063-34.074 34.074-34.074-34.074c-0.012103-0.013323-0.024917-0.025824-0.037109-0.039063-1.4599-1.5853-3.5537-2.5762-5.8887-2.5762h-8z" />
            </svg>
        </div>
        <script>
            function jumpdown() {
                window.scrollTo({
                    top: window.innerHeight, left: 0, behavior: 'smooth'
                });
            }
        </script>
    {{ end }}
{{ end }}