...
✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

So erstellen Sie eine YouTube-Videogalerie für Ihre Website

96

Möchten Sie eine responsive YouTube-Videogalerie erstellen? Vielleicht möchten Sie die YouTube-Videos zusammen auf der Website auflisten. Der übliche Ablauf dafür ist die Anzeige der Video-Thumbnails. Und wenn jemand auf das Thumbnail klickt, sollte das zugehörige Video im Popup abgespielt werden. Aus dem geöffneten Pop-up können Benutzer zum nächsten und vorherigen Video wechseln. So sollten sich Videogalerien normal verhalten.

In diesem Artikel zeige ich Ihnen, wie Sie mit Bootstrap und fancybox eine YouTube-Videogalerie erstellen.

Warum brauchen Sie eine Videogalerie auf der Website?

Eine Videogalerie wird verwendet, um Ihre Videosammlung zu organisieren. Durch das Erstellen einer Videogalerie können Ihre Benutzer Ihre Videosammlung an einem Ort anzeigen. Abgesehen davon kann es andere Gründe geben, die Galerie auf die Website zu stellen. Angenommen, Sie haben eine geschäftliche Veranstaltung oder ein Treffen abgeschlossen und möchten nun alle Ihre Veranstaltungsvideos auf der Website für die Benutzer anzeigen.

Die Videogalerie ist auch hilfreich, um die Aufrufe Ihres YouTube-Kanals zu erhöhen.

Sehen wir uns jedoch an, wie Sie auf der Website eine YouTube-Videogalerie erstellen. Unsere endgültige Ausgabe wird unten als Screenshot angezeigt.

So erstellen Sie eine YouTube-Videogalerie für Ihre Website

Erstellen Sie eine YouTube-Videogalerie mit Bootstrap und fancybox

Ich werde das grundlegende Design für eine Videogalerie setzen. Meine Hauptabsicht ist es, Ihnen zu zeigen, wie Sie YouTube-Video-Thumbnails erhalten und wie Sie Videos in fancybox abspielen. Der Benutzer sollte der endgültigen Ausgabe sein eigenes Styling hinzufügen.

Holen Sie sich ein Thumbnail des YouTube-Videos

Um zu beginnen, müssen wir einen Code schreiben, der ein Thumbnail des YouTube-Videos zurückgibt. Als Beispiel nehme ich ein paar meiner YouTube-Videos. Im folgenden Code habe ich eine Methode geschrieben, die die ID aus YouTube-Video-URLs extrahiert und eine Miniaturansicht von YouTube-Videos zurückgibt.

<?php
$arr_video_ids = array(
    'https://www.youtube.com/watch?v=Pzv_lUp3iOQ',
    'https://www.youtube.com/watch?v=zRtU8dpTEXg',
    'https://www.youtube.com/watch?v=EfSfLyeREMc',
    'https://www.youtube.com/watch?v=C-nypyy4pLg',
    'https://www.youtube.com/watch?v=OJpMT3odXtQ',
    'https://www.youtube.com/watch?v=WBnzOyBVwdg',
);
 
function getYouTubeThumbnailImage($video_id) {
    return "http://i3.ytimg.com/vi/$video_id/hqdefault.jpg";
}
 
function extractVideoID($url){
    $regExp = "/^.*((youtu.be/)|(v/)|(/u/w/)|(embed/)|(watch?))??v?=?([^#&?]*).*/";
    preg_match($regExp, $url, $video);
    return $video[7];
}
?>

Die Methode extractVideoID()gibt eine Video-ID von der Video-URL zurück. Mit dieser Video-ID holen wir das Video-Thumbnail mit der Funktion getYouTubeThumbnailImage.

Eine Galerie anzeigen

Ich werde das Array von Videos durchgehen, das Thumbnail abrufen und auf einer Seite platzieren. Dabei habe ich auch eine Fancybox integriert, um das Video in der Lightbox abzuspielen. Die von Fancybox bereitgestellte Lightbox ist touchfähig, reaktionsschnell und vollständig anpassbar.

Schreiben wir einen HTML-Code mit Hilfe von Bootstrap und fancybox wie folgt.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
    <h3 class="text-center">My Video Gallery</h3>
    <div class="row">
        <?php foreach ($arr_video_ids as $video) { ?>
            <?php
            $video_id = extractVideoID($video);
            $video_thumbnail = getYouTubeThumbnailImage($video_id);
            ?>
            <div class="col-md-4">
                <div class="pb-2">
                    <a data-fancybox="video-gallery" href="<?php echo $video; ?>">
                        <img src="<?php echo $video_thumbnail; ?>" class="img-thumbnail" />
                    </a>
                </div>
            </div>
        <?php } ?>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

Gehen Sie zum Browser und versuchen Sie es. Sie sollten eine funktionierende YouTube-Videogalerie sehen können.

Ich hoffe, Sie verstehen, wie Sie eine YouTube-Videogalerie auf der Website erstellen. Bitte teilen Sie Ihre Gedanken und Vorschläge in einem Kommentar unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen