`views/partials/video.ejs`

55 lines
<% const videoItems = typeof videos !== 'undefined' ? videos : []; %>

<% if (videoItems.length > 0) { %>
<div class="video-gallery">
        <% videoItems.forEach((video, index) => { %>
            <div
                class="video-item"
                data-index="<%= index %>"
                <% if (video.caption) { %>data-caption="<%= video.caption %>"<% } %>
                role="button"
                tabindex="0"
                aria-label="Play <%= video.title || 'video' %>">

                <div class="video-wrapper">
                    <video
                        class="video-element"
                        data-mp4="<%= video.mp4 %>"
                        <% if (video.webm) { %>data-webm="<%= video.webm %>"<% } %>
                        <% if (video.poster) { %>poster="<%= video.poster %>"<% } %>
                        preload="metadata"
                        playsinline
                        aria-label="<%= video.title || 'Video ' + (index + 1) %>">
                        <!-- Video sources will be loaded dynamically based on connection speed -->
                    </video>

                    <div class="video-controls-overlay">
                        <button class="video-play-button" aria-label="Play video">
                            <i class="fas fa-play"></i>
                        </button>
                    </div>

                    <div class="video-loading-indicator">
                        <i class="fas fa-spinner fa-spin"></i>
                    </div>
                </div>

                <% if (video.title || video.caption) { %>
                    <div class="video-info">
                        <% if (video.title) { %>
                            <h4 class="video-title"><%= video.title %></h4>
                        <% } %>
                        <% if (video.caption) { %>
                            <p class="video-caption"><%= video.caption %></p>
                        <% } %>
                    </div>
                <% } %>
            </div>
        <% }); %>
</div>
<% } else { %>
<div class="video-gallery">
    <p style="text-align: center; color: #666; padding: 2rem;">No videos available</p>
</div>
<% } %>