From e319e9129015ad32a478dcffc6cb5e18e1b16ef2 Mon Sep 17 00:00:00 2001
From: M_Viper <admin@m-viper.de>
Date: Sun, 29 Mar 2026 20:27:24 +0000
Subject: [PATCH] Upload via Git Manager GUI - archive-video.php

---
 Minecraft-Modern-Theme/archive-video.php | 749 ++++++++++++++---------
 1 file changed, 460 insertions(+), 289 deletions(-)

diff --git a/Minecraft-Modern-Theme/archive-video.php b/Minecraft-Modern-Theme/archive-video.php
index 22ddb71..edfdda4 100644
--- a/Minecraft-Modern-Theme/archive-video.php
+++ b/Minecraft-Modern-Theme/archive-video.php
@@ -1,290 +1,461 @@
-<?php get_header(); ?>
-
-<style>
-#yt-player-container {
-    position: relative;
-    width: 100%;
-    padding-bottom: 56.25%; /* 16:9 */
-    height: 0;
-    overflow: hidden;
-}
-#yt-player-container iframe,
-#yt-player-container #yt-player {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: 100% !important;
-}
-#other-player-container {
-    position: relative;
-    width: 100%;
-    padding-bottom: 56.25%;
-    height: 0;
-    overflow: hidden;
-}
-#other-player-container iframe,
-#other-player-container video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-</style>
-
-<div class="container site-main">
-    <div class="content-area">
-
-        <div class="video-archive-container">
-
-            <header class="page-header">
-                <h1 class="page-title">
-                    <i class="fas fa-play-circle"></i> <?php _e( 'Videos', 'minecraft-modern-theme' ); ?>
-                </h1>
-                <p class="page-description">
-                    <?php _e( 'Alle Videos auf einem Blick. Klicke auf ein Video um es direkt hier anzusehen.', 'minecraft-modern-theme' ); ?>
-                </p>
-
-                <?php
-                $categories = array();
-                $all_vids   = get_posts( array( 'post_type' => 'mm_video', 'posts_per_page' => -1, 'fields' => 'ids' ) );
-                foreach ( $all_vids as $vid_id ) {
-                    $cat = get_post_meta( $vid_id, '_mm_video_category', true );
-                    if ( $cat ) $categories[ $cat ] = $cat;
-                }
-                if ( count( $categories ) > 1 ) : ?>
-                <div class="video-filter-bar">
-                    <button class="video-filter-btn active" data-filter="all">
-                        <?php _e( 'Alle', 'minecraft-modern-theme' ); ?>
-                    </button>
-                    <?php foreach ( $categories as $cat ) : ?>
-                        <button class="video-filter-btn" data-filter="<?php echo esc_attr( $cat ); ?>">
-                            <?php echo esc_html( $cat ); ?>
-                        </button>
-                    <?php endforeach; ?>
-                </div>
-                <?php endif; ?>
-            </header>
-
-            <?php
-            $query = new WP_Query( array(
-                'post_type'      => 'mm_video',
-                'posts_per_page' => -1,
-                'orderby'        => 'menu_order date',
-                'order'          => 'ASC',
-            ) );
-
-            if ( $query->have_posts() ) : ?>
-
-            <div class="video-grid" id="video-grid">
-                <?php while ( $query->have_posts() ) : $query->the_post();
-                    $url      = get_post_meta( get_the_ID(), '_mm_video_url', true );
-                    $category = get_post_meta( get_the_ID(), '_mm_video_category', true );
-                    $thumb    = get_the_post_thumbnail_url( get_the_ID(), 'medium_large' );
-                    $type     = $url ? mm_video_get_type( $url ) : 'unknown';
-
-                    if ( ! $thumb && $url && $type === 'youtube' ) {
-                        if ( preg_match( '/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m ) ) {
-                            $thumb = 'https://img.youtube.com/vi/' . $m[1] . '/maxresdefault.jpg';
-                        }
-                    }
-
-                    $platform_icons = array(
-                        'youtube' => array( 'icon' => 'fab fa-youtube',  'color' => '#ff0000' ),
-                        'vimeo'   => array( 'icon' => 'fab fa-vimeo-v',  'color' => '#1ab7ea' ),
-                        'twitch'  => array( 'icon' => 'fab fa-twitch',   'color' => '#9146ff' ),
-                        'mp4'     => array( 'icon' => 'fas fa-film',     'color' => '#aaa' ),
-                    );
-                    $platform = isset( $platform_icons[$type] ) ? $platform_icons[$type] : array( 'icon' => 'fas fa-play', 'color' => '#aaa' );
-                ?>
-                <div class="video-card" data-category="<?php echo esc_attr( $category ); ?>">
-                    <div class="video-card-thumb"
-                         data-url="<?php echo esc_attr( $url ); ?>"
-                         data-type="<?php echo esc_attr( $type ); ?>"
-                         data-title="<?php echo esc_attr( get_the_title() ); ?>">
-                        <?php if ( $thumb ) : ?>
-                            <img src="<?php echo esc_url( $thumb ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>" loading="lazy">
-                        <?php else : ?>
-                            <div class="video-card-no-thumb"><i class="fas fa-play-circle"></i></div>
-                        <?php endif; ?>
-                        <div class="video-card-hover">
-                            <i class="fas fa-play"></i>
-                        </div>
-                        <span class="video-platform-badge" style="color:<?php echo esc_attr($platform['color']); ?>">
-                            <i class="<?php echo esc_attr($platform['icon']); ?>"></i>
-                        </span>
-                    </div>
-                    <div class="video-card-body">
-                        <h3 class="video-card-title"><?php the_title(); ?></h3>
-                        <?php if ( has_excerpt() ) : ?>
-                            <p class="video-card-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 12 ); ?></p>
-                        <?php endif; ?>
-                        <?php if ( $category ) : ?>
-                            <span class="video-card-tag"><?php echo esc_html( $category ); ?></span>
-                        <?php endif; ?>
-                    </div>
-                </div>
-                <?php endwhile; wp_reset_postdata(); ?>
-            </div>
-
-            <!-- Lightbox -->
-            <div id="video-lightbox" class="video-lightbox" style="display:none;" aria-hidden="true">
-                <div class="video-lightbox-backdrop"></div>
-                <div class="video-lightbox-box">
-                    <div class="video-lightbox-head">
-                        <h3 class="video-lightbox-title"></h3>
-                        <button class="video-lightbox-close" aria-label="<?php esc_attr_e('Schließen','minecraft-modern-theme'); ?>">
-                            <i class="fas fa-times"></i>
-                        </button>
-                    </div>
-                    <div class="video-lightbox-player">
-                        <div id="yt-player-container" style="display:none;">
-                            <div id="yt-player"></div>
-                        </div>
-                        <div id="other-player-container" style="display:none;"></div>
-                    </div>
-                </div>
-            </div>
-
-            <?php else : ?>
-            <div class="video-empty">
-                <i class="fas fa-video-slash"></i>
-                <p><?php _e( 'Noch keine Videos vorhanden.', 'minecraft-modern-theme' ); ?></p>
-                <?php if ( current_user_can('publish_posts') ) : ?>
-                    <a href="<?php echo esc_url( admin_url('post-new.php?post_type=mm_video') ); ?>" class="btn-primary">
-                        <i class="fas fa-plus"></i> <?php _e('Erstes Video hinzufügen','minecraft-modern-theme'); ?>
-                    </a>
-                <?php endif; ?>
-            </div>
-            <?php endif; ?>
-
-        </div><!-- .video-archive-container -->
-    </div>
-</div>
-
-<!-- YouTube IFrame API -->
-<script src="https://www.youtube.com/iframe_api"></script>
-<script>
-var ytPlayer = null;
-var ytPlayerReady = false;
-var pendingVideoId = null;
-
-function onYouTubeIframeAPIReady() {
-    ytPlayer = new YT.Player('yt-player', {
-        height: '100%',
-        width: '100%',
-        playerVars: {
-            autoplay: 1,
-            rel: 0,
-            modestbranding: 1,
-        },
-        events: {
-            onReady: function(e) {
-                ytPlayerReady = true;
-                if (pendingVideoId) {
-                    e.target.loadVideoById(pendingVideoId);
-                    pendingVideoId = null;
-                }
-            }
-        }
-    });
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    var lb          = document.getElementById('video-lightbox');
-    var lbTitle     = lb ? lb.querySelector('.video-lightbox-title') : null;
-    var ytContainer = document.getElementById('yt-player-container');
-    var otContainer = document.getElementById('other-player-container');
-
-    function extractYouTubeId(url) {
-        var m = url.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
-        return m ? m[1] : null;
-    }
-
-    function buildOtherEmbed(url, title) {
-        var t = (title||'Video').replace(/"/g,'&quot;');
-
-        var viM = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
-        if (viM) return '<iframe src="https://player.vimeo.com/video/'+viM[1]+'?autoplay=1&dnt=1" title="'+t+'" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>';
-
-        var tvM = url.match(/twitch\.tv\/videos\/(\d+)/);
-        if (tvM) return '<iframe src="https://player.twitch.tv/?video=v'+tvM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
-
-        var tcM = url.match(/twitch\.tv\/([a-zA-Z0-9_]+)$/);
-        if (tcM) return '<iframe src="https://player.twitch.tv/?channel='+tcM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
-
-        if (/\.(mp4|webm|ogv)(\?.*)?$/i.test(url)) return '<video controls autoplay playsinline><source src="'+url+'" type="video/mp4"></video>';
-
-        return '<p style="color:var(--text-muted);text-align:center;padding:30px;">Ungültige URL</p>';
-    }
-
-    function openLb(url, title, type) {
-        if (!lb) return;
-        if (lbTitle) lbTitle.textContent = title || '';
-        lb.style.display = 'flex';
-        lb.setAttribute('aria-hidden','false');
-        document.body.style.overflow = 'hidden';
-        setTimeout(function(){ lb.classList.add('is-open'); }, 10);
-
-        var ytId = extractYouTubeId(url);
-
-        if (ytId) {
-            otContainer.style.display = 'none';
-            otContainer.innerHTML = '';
-            ytContainer.style.display = 'block';
-
-            if (ytPlayerReady && ytPlayer) {
-                ytPlayer.loadVideoById(ytId);
-            } else {
-                pendingVideoId = ytId;
-            }
-        } else {
-            ytContainer.style.display = 'none';
-            if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
-            otContainer.style.display = 'block';
-            otContainer.innerHTML = buildOtherEmbed(url, title);
-        }
-    }
-
-    function closeLb() {
-        if (!lb) return;
-        lb.classList.remove('is-open');
-        setTimeout(function(){
-            lb.style.display = 'none';
-            lb.setAttribute('aria-hidden','true');
-            document.body.style.overflow = '';
-            if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
-            ytContainer.style.display = 'none';
-            otContainer.innerHTML = '';
-            otContainer.style.display = 'none';
-        }, 300);
-    }
-
-    document.querySelectorAll('.video-card-thumb').forEach(function(el) {
-        el.addEventListener('click', function() {
-            openLb(this.dataset.url, this.dataset.title, this.dataset.type);
-        });
-    });
-
-    var closeBtn = lb ? lb.querySelector('.video-lightbox-close') : null;
-    var backdrop = lb ? lb.querySelector('.video-lightbox-backdrop') : null;
-    if (closeBtn) closeBtn.addEventListener('click', closeLb);
-    if (backdrop)  backdrop.addEventListener('click', closeLb);
-    document.addEventListener('keydown', function(e){ if (e.key==='Escape') closeLb(); });
-
-    // Kategorie-Filter
-    document.querySelectorAll('.video-filter-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-            document.querySelectorAll('.video-filter-btn').forEach(function(b){ b.classList.remove('active'); });
-            this.classList.add('active');
-            var f = this.dataset.filter;
-            document.querySelectorAll('.video-card').forEach(function(c) {
-                c.style.display = (f === 'all' || c.dataset.category === f) ? '' : 'none';
-            });
-        });
-    });
-});
-</script>
-
+<?php get_header(); ?>
+
+<style>
+/* Basis-Styles für Player */
+#yt-player-container {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+    overflow: hidden;
+}
+#yt-player-container iframe,
+#yt-player-container #yt-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100% !important;
+}
+#other-player-container {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+#other-player-container iframe,
+#other-player-container video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* === NEU: Styles für das Livestream Popup (Lightbox) === */
+.livestream-lightbox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+    display: none; /* Wird via JS auf flex gesetzt */
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.livestream-lightbox.is-open {
+    display: flex;
+    opacity: 1;
+}
+.livestream-lightbox-backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
+}
+.livestream-lightbox-box {
+    position: relative;
+    width: 90%;
+    max-width: 1100px;
+    background: #1a1a1a;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    transform: translateY(20px);
+    transition: transform 0.3s ease;
+}
+.livestream-lightbox.is-open .livestream-lightbox-box {
+    transform: translateY(0);
+}
+.livestream-lightbox-head {
+    padding: 15px 25px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #222;
+    border-bottom: 1px solid #333;
+}
+.livestream-lightbox-title {
+    margin: 0;
+    font-size: 1.2rem;
+    color: #fff;
+}
+.livestream-lightbox-close {
+    background: none;
+    border: none;
+    color: #aaa;
+    font-size: 24px;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+.livestream-lightbox-close:hover {
+    color: #fff;
+}
+.livestream-lightbox-player {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    background: #000;
+}
+.livestream-lightbox-player iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+.livestream-lightbox-meta {
+    padding: 15px 25px;
+    background: #222;
+    text-align: right;
+}
+.livestream-lightbox-meta a {
+    color: #00dcff;
+    text-decoration: none;
+    font-weight: bold;
+}
+/* Klick-Indikator für die Karten */
+.video-livestream-list > div {
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+.video-livestream-list > div:hover {
+    transform: scale(1.02);
+}
+</style>
+
+<div class="container site-main">
+    <div class="content-area">
+        <div class="video-archive-container">
+
+            <header class="page-header">
+                <h1 class="page-title">
+                    <i class="fas fa-play-circle"></i> <?php _e( 'Videos', 'minecraft-modern-theme' ); ?>
+                </h1>
+                <p class="page-description">
+                    <?php _e( 'Alle Videos auf einem Blick. Klicke auf ein Video um es direkt hier anzusehen.', 'minecraft-modern-theme' ); ?>
+                </p>
+
+                <?php
+                $categories = array();
+                $all_vids   = get_posts( array( 'post_type' => 'mm_video', 'posts_per_page' => -1, 'fields' => 'ids' ) );
+                foreach ( $all_vids as $vid_id ) {
+                    $cat = get_post_meta( $vid_id, '_mm_video_category', true );
+                    if ( $cat ) $categories[ $cat ] = $cat;
+                }
+                if ( count( $categories ) > 1 ) : ?>
+                <div class="video-filter-bar">
+                    <button class="video-filter-btn active" data-filter="all">
+                        <?php _e( 'Alle', 'minecraft-modern-theme' ); ?>
+                    </button>
+                    <?php foreach ( $categories as $cat ) : ?>
+                        <button class="video-filter-btn" data-filter="<?php echo esc_attr( $cat ); ?>">
+                            <?php echo esc_html( $cat ); ?>
+                        </button>
+                    <?php endforeach; ?>
+                </div>
+                <?php endif; ?>
+            </header>
+
+            <?php
+            $livestream_groups = mm_video_get_livestream_groups();
+            ?>
+            <?php if ( ! empty( $livestream_groups ) ) : ?>
+            <div class="video-livestream-section">
+                <h2 class="section-livestream-title">
+                    <span class="live-indicator"></span>
+                    <span><?php _e( 'JETZT LIVE', 'minecraft-modern-theme' ); ?></span>
+                </h2>
+                <div class="video-livestream-list">
+                    <?php foreach ( $livestream_groups as $group_index => $livestream_group ) : ?>
+                        <?php echo mm_video_render_livestream_group( $livestream_group, $group_index ); ?>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+            <?php endif; ?>
+
+            <?php
+            $query = new WP_Query( array(
+                'post_type'      => 'mm_video',
+                'posts_per_page' => -1,
+                'orderby'        => 'menu_order date',
+                'order'          => 'ASC',
+            ) );
+
+            if ( $query->have_posts() ) : ?>
+
+            <div class="video-grid" id="video-grid">
+                <?php while ( $query->have_posts() ) : $query->the_post();
+                    $url      = get_post_meta( get_the_ID(), '_mm_video_url', true );
+                    $category = get_post_meta( get_the_ID(), '_mm_video_category', true );
+                    $thumb    = get_the_post_thumbnail_url( get_the_ID(), 'medium_large' );
+                    $type     = $url ? mm_video_get_type( $url ) : 'unknown';
+
+                    if ( ! $thumb && $url && $type === 'youtube' ) {
+                        if ( preg_match( '/(?:youtube\.com\/(?:watch\?v=|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m ) ) {
+                            $thumb = 'https://img.youtube.com/vi/' . $m[1] . '/maxresdefault.jpg';
+                        }
+                    }
+
+                    $platform_icons = array(
+                        'youtube' => array( 'icon' => 'fab fa-youtube',  'color' => '#ff0000' ),
+                        'vimeo'   => array( 'icon' => 'fab fa-vimeo-v',  'color' => '#1ab7ea' ),
+                        'twitch'  => array( 'icon' => 'fab fa-twitch',   'color' => '#9146ff' ),
+                        'mp4'     => array( 'icon' => 'fas fa-film',      'color' => '#aaa' ),
+                    );
+                    $platform = isset( $platform_icons[$type] ) ? $platform_icons[$type] : array( 'icon' => 'fas fa-play', 'color' => '#aaa' );
+                ?>
+                <div class="video-card" data-category="<?php echo esc_attr( $category ); ?>">
+                    <div class="video-card-thumb"
+                         data-url="<?php echo esc_attr( $url ); ?>"
+                         data-type="<?php echo esc_attr( $type ); ?>"
+                         data-title="<?php echo esc_attr( get_the_title() ); ?>">
+                        <?php if ( $thumb ) : ?>
+                            <img src="<?php echo esc_url( $thumb ); ?>" alt="<?php echo esc_attr( get_the_title() ); ?>" loading="lazy">
+                        <?php else : ?>
+                            <div class="video-card-no-thumb"><i class="fas fa-play-circle"></i></div>
+                        <?php endif; ?>
+                        <div class="video-card-hover">
+                            <i class="fas fa-play"></i>
+                        </div>
+                        <span class="video-platform-badge" style="color:<?php echo esc_attr($platform['color']); ?>">
+                            <i class="<?php echo esc_attr($platform['icon']); ?>"></i>
+                        </span>
+                    </div>
+                    <div class="video-card-body">
+                        <h3 class="video-card-title"><?php the_title(); ?></h3>
+                        <?php if ( has_excerpt() ) : ?>
+                            <p class="video-card-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 12 ); ?></p>
+                        <?php endif; ?>
+                        <?php if ( $category ) : ?>
+                            <span class="video-card-tag"><?php echo esc_html( $category ); ?></span>
+                        <?php endif; ?>
+                    </div>
+                </div>
+                <?php endwhile; wp_reset_postdata(); ?>
+            </div>
+
+            <div id="video-lightbox" class="video-lightbox" style="display:none;" aria-hidden="true">
+                <div class="video-lightbox-backdrop"></div>
+                <div class="video-lightbox-box">
+                    <div class="video-lightbox-head">
+                        <h3 class="video-lightbox-title"></h3>
+                        <button class="video-lightbox-close" aria-label="<?php esc_attr_e('Schließen','minecraft-modern-theme'); ?>">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="video-lightbox-player">
+                        <div id="yt-player-container" style="display:none;">
+                            <div id="yt-player"></div>
+                        </div>
+                        <div id="other-player-container" style="display:none;"></div>
+                    </div>
+                </div>
+            </div>
+
+            <?php else : ?>
+            <div class="video-empty">
+                <i class="fas fa-video-slash"></i>
+                <p><?php _e( 'Noch keine Videos vorhanden.', 'minecraft-modern-theme' ); ?></p>
+                <?php if ( current_user_can('publish_posts') ) : ?>
+                    <a href="<?php echo esc_url( admin_url('post-new.php?post_type=mm_video') ); ?>" class="btn-primary">
+                        <i class="fas fa-plus"></i> <?php _e('Erstes Video hinzufügen','minecraft-modern-theme'); ?>
+                    </a>
+                <?php endif; ?>
+            </div>
+            <?php endif; ?>
+
+        </div>
+    </div>
+</div>
+
+<script src="https://www.youtube.com/iframe_api"></script>
+<script>
+var ytPlayer = null;
+var ytPlayerReady = false;
+var pendingVideoId = null;
+var livestreamPlayers = new Map();
+var livestreamPlayerCallbacks = [];
+
+function onYouTubeIframeAPIReady() {
+    ytPlayer = new YT.Player('yt-player', {
+        height: '100%',
+        width: '100%',
+        playerVars: { autoplay: 1, rel: 0, modestbranding: 1 },
+        events: {
+            onReady: function(e) {
+                ytPlayerReady = true;
+                if (pendingVideoId) {
+                    e.target.loadVideoById(pendingVideoId);
+                    pendingVideoId = null;
+                }
+            }
+        }
+    });
+
+    livestreamPlayerCallbacks.forEach(function(callback) { callback(); });
+    livestreamPlayerCallbacks = [];
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    var lb          = document.getElementById('video-lightbox');
+    var lbTitle     = lb ? lb.querySelector('.video-lightbox-title') : null;
+    var ytContainer = document.getElementById('yt-player-container');
+    var otContainer = document.getElementById('other-player-container');
+
+    function extractYouTubeId(url) {
+        var m = url.match(/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+        return m ? m[1] : null;
+    }
+
+    function buildOtherEmbed(url, title) {
+        var t = (title||'Video').replace(/"/g,'&quot;');
+        var viM = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+        if (viM) return '<iframe src="https://player.vimeo.com/video/'+viM[1]+'?autoplay=1&dnt=1" title="'+t+'" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>';
+        var tvM = url.match(/twitch\.tv\/videos\/(\d+)/);
+        if (tvM) return '<iframe src="https://player.twitch.tv/?video=v'+tvM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
+        var tcM = url.match(/twitch\.tv\/([a-zA-Z0-9_]+)$/);
+        if (tcM) return '<iframe src="https://player.twitch.tv/?channel='+tcM[1]+'&parent='+location.hostname+'&autoplay=true" title="'+t+'" frameborder="0" allowfullscreen></iframe>';
+        if (/\.(mp4|webm|ogv)(\?.*)?$/i.test(url)) return '<video controls autoplay playsinline><source src="'+url+'" type="video/mp4"></video>';
+        return '<p style="color:#aaa;text-align:center;padding:30px;">Ungültige URL</p>';
+    }
+
+    function openLb(url, title, type) {
+        if (!lb) return;
+        if (lbTitle) lbTitle.textContent = title || '';
+        lb.style.display = 'flex';
+        lb.setAttribute('aria-hidden','false');
+        document.body.style.overflow = 'hidden';
+        setTimeout(function(){ lb.classList.add('is-open'); }, 10);
+
+        var ytId = extractYouTubeId(url);
+        if (ytId) {
+            otContainer.style.display = 'none';
+            otContainer.innerHTML = '';
+            ytContainer.style.display = 'block';
+            if (ytPlayerReady && ytPlayer) ytPlayer.loadVideoById(ytId); else pendingVideoId = ytId;
+        } else {
+            ytContainer.style.display = 'none';
+            if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
+            otContainer.style.display = 'block';
+            otContainer.innerHTML = buildOtherEmbed(url, title);
+        }
+    }
+
+    function closeLb() {
+        if (!lb) return;
+        lb.classList.remove('is-open');
+        setTimeout(function(){
+            lb.style.display = 'none';
+            lb.setAttribute('aria-hidden','true');
+            document.body.style.overflow = '';
+            if (ytPlayerReady && ytPlayer) ytPlayer.stopVideo();
+            ytContainer.style.display = 'none';
+            otContainer.innerHTML = '';
+            otContainer.style.display = 'none';
+        }, 300);
+    }
+
+    document.querySelectorAll('.video-card-thumb').forEach(function(el) {
+        el.addEventListener('click', function() { openLb(this.dataset.url, this.dataset.title, this.dataset.type); });
+    });
+
+    if (lb) {
+        lb.querySelector('.video-lightbox-close').addEventListener('click', closeLb);
+        lb.querySelector('.video-lightbox-backdrop').addEventListener('click', closeLb);
+    }
+    document.addEventListener('keydown', function(e){ if (e.key==='Escape') closeLb(); });
+
+    // Filter
+    document.querySelectorAll('.video-filter-btn').forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            document.querySelectorAll('.video-filter-btn').forEach(function(b){ b.classList.remove('active'); });
+            this.classList.add('active');
+            var f = this.dataset.filter;
+            document.querySelectorAll('.video-card').forEach(function(c) {
+                c.style.display = (f === 'all' || c.dataset.category === f) ? '' : 'none';
+            });
+        });
+    });
+
+    // === Livestream Lightbox System ===
+    var livestreamLightbox = document.createElement('div');
+    livestreamLightbox.id = 'livestream-lightbox';
+    livestreamLightbox.className = 'livestream-lightbox';
+    livestreamLightbox.setAttribute('aria-hidden', 'true');
+    livestreamLightbox.innerHTML = `
+        <div class="livestream-lightbox-backdrop"></div>
+        <div class="livestream-lightbox-box">
+            <div class="livestream-lightbox-head">
+                <h3 class="livestream-lightbox-title"></h3>
+                <button class="livestream-lightbox-close" aria-label="Schließen"><i class="fas fa-times"></i></button>
+            </div>
+            <div class="livestream-lightbox-player"></div>
+            <div class="livestream-lightbox-meta"></div>
+        </div>
+    `;
+    document.body.appendChild(livestreamLightbox);
+
+    var lsLightbox = document.getElementById('livestream-lightbox');
+    var lsTitle = lsLightbox.querySelector('.livestream-lightbox-title');
+    var lsPlayer = lsLightbox.querySelector('.livestream-lightbox-player');
+    var lsMeta = lsLightbox.querySelector('.livestream-lightbox-meta');
+
+    function openLivestreamLightbox(embedUrl, title, profileUrl, platform) {
+        lsTitle.textContent = title || 'Livestream';
+        // Wir nutzen ein sauberes Iframe für das Popup
+        lsPlayer.innerHTML = '<iframe src="' + embedUrl + '" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
+        
+        var icon = platform === 'youtube' ? 'fab fa-youtube' : (platform === 'twitch' ? 'fab fa-twitch' : 'fas fa-play');
+        lsMeta.innerHTML = profileUrl ? '<a href="' + profileUrl + '" target="_blank" rel="noopener"><i class="' + icon + '"></i> Zum Kanal</a>' : '';
+        
+        lsLightbox.style.display = 'flex';
+        lsLightbox.setAttribute('aria-hidden', 'false');
+        document.body.style.overflow = 'hidden';
+        setTimeout(function() { lsLightbox.classList.add('is-open'); }, 10);
+    }
+
+    function closeLivestreamLightbox() {
+        lsLightbox.classList.remove('is-open');
+        setTimeout(function() {
+            lsLightbox.style.display = 'none';
+            lsLightbox.setAttribute('aria-hidden', 'true');
+            document.body.style.overflow = '';
+            lsPlayer.innerHTML = '';
+        }, 300);
+    }
+
+    lsLightbox.querySelector('.livestream-lightbox-close').addEventListener('click', closeLivestreamLightbox);
+    lsLightbox.querySelector('.livestream-lightbox-backdrop').addEventListener('click', closeLivestreamLightbox);
+
+    // Klick-Event für die "Jetzt Live" Karten
+    document.querySelectorAll('.video-livestream-list > div').forEach(function(card) {
+        card.addEventListener('click', function(e) {
+            // Falls auf den echten Button im Card geklickt wird, Standardverhalten lassen
+            if (e.target.closest('.btn-primary')) return;
+
+            e.preventDefault();
+            var iframe = card.querySelector('iframe');
+            var embedUrl = iframe ? iframe.src : '';
+            var title = card.querySelector('h3') ? card.querySelector('h3').textContent : 'Livestream';
+            var link = card.querySelector('.btn-primary') ? card.querySelector('.btn-primary').href : '';
+            
+            var platform = embedUrl.includes('twitch') ? 'twitch' : 'youtube';
+
+            if (embedUrl && !embedUrl.includes('about:blank')) {
+                openLivestreamLightbox(embedUrl, title, link, platform);
+            }
+        });
+    });
+});
+</script>
+
 <?php get_footer(); ?>
\ No newline at end of file