{"id":25249,"date":"2021-06-03T19:47:00","date_gmt":"2021-06-03T16:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25249"},"modified":"2021-10-18T02:34:33","modified_gmt":"2021-10-17T23:34:33","slug":"so-erstellen-sie-eine-youtube-videogalerie-fuer-ihre-website","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-eine-youtube-videogalerie-fuer-ihre-website\/","title":{"rendered":"So erstellen Sie eine YouTube-Videogalerie f\u00fcr Ihre Website"},"content":{"rendered":"

M\u00f6chten Sie eine responsive YouTube-Videogalerie erstellen? Vielleicht m\u00f6chten Sie die YouTube-Videos zusammen auf der Website auflisten. Der \u00fcbliche Ablauf daf\u00fcr ist die Anzeige der Video-Thumbnails. Und wenn jemand auf das Thumbnail klickt, sollte das zugeh\u00f6rige Video im Popup abgespielt werden. Aus dem ge\u00f6ffneten Pop-up k\u00f6nnen Benutzer zum n\u00e4chsten und vorherigen Video wechseln. So sollten sich Videogalerien normal verhalten.<\/p>\n

In diesem Artikel zeige ich Ihnen, wie Sie mit Bootstrap und fancybox eine YouTube-Videogalerie erstellen.<\/p>\n

Warum brauchen Sie eine Videogalerie auf der Website?<\/h3>\n

Eine Videogalerie wird verwendet, um Ihre Videosammlung zu organisieren. Durch das Erstellen einer Videogalerie k\u00f6nnen Ihre Benutzer Ihre Videosammlung an einem Ort anzeigen. Abgesehen davon kann es andere Gr\u00fcnde geben, die Galerie auf die Website zu stellen. Angenommen, Sie haben eine gesch\u00e4ftliche Veranstaltung oder ein Treffen abgeschlossen und m\u00f6chten nun alle Ihre Veranstaltungsvideos auf der Website f\u00fcr die Benutzer anzeigen.<\/p>\n

Die Videogalerie ist auch hilfreich, um die Aufrufe Ihres YouTube-Kanals zu erh\u00f6hen.<\/p>\n

Sehen wir uns jedoch an, wie Sie auf der Website eine YouTube-Videogalerie erstellen. Unsere endg\u00fcltige Ausgabe wird unten als Screenshot angezeigt.<\/p>\n

\"So<\/a><\/p>\n

Erstellen Sie eine YouTube-Videogalerie mit Bootstrap und fancybox<\/h3>\n

Ich werde das grundlegende Design f\u00fcr 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\u00fcltigen Ausgabe sein eigenes Styling hinzuf\u00fcgen.<\/p>\n

Holen Sie sich ein Thumbnail des YouTube-Videos<\/h4>\n

Um zu beginnen, m\u00fcssen wir einen Code schreiben, der ein Thumbnail des YouTube-Videos zur\u00fcckgibt. 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\u00fcckgibt.<\/p>\n

<?php\n$arr_video_ids = array(\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=Pzv_lUp3iOQ',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=zRtU8dpTEXg',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=EfSfLyeREMc',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=C-nypyy4pLg',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=OJpMT3odXtQ',\n\u00a0\u00a0\u00a0\u00a0'https:\/\/www.youtube.com\/watch?v=WBnzOyBVwdg',\n);\n\u00a0\nfunction getYouTubeThumbnailImage($video_id) {\n\u00a0\u00a0\u00a0\u00a0return \"http:\/\/i3.ytimg.com\/vi\/$video_id\/hqdefault.jpg\";\n}\n\u00a0\nfunction extractVideoID($url){\n\u00a0\u00a0\u00a0\u00a0$regExp = \"\/^.*((youtu.be\/)|(v\/)|(\/u\/w\/)|(embed\/)|(watch?))??v?=?([^#&?]*).*\/\";\n\u00a0\u00a0\u00a0\u00a0preg_match($regExp, $url, $video);\n\u00a0\u00a0\u00a0\u00a0return $video[7];\n}\n?><\/code><\/pre>\n
Die Methode extractVideoID()<\/code>gibt eine Video-ID von der Video-URL zur\u00fcck. Mit dieser Video-ID holen wir das Video-Thumbnail mit der Funktion getYouTubeThumbnailImage<\/code>.<\/p>\n
Eine Galerie anzeigen<\/h4>\n
Ich werde das Array von Videos durchgehen, das Thumbnail abrufen und auf einer Seite platzieren. Dabei habe ich auch eine Fancybox<\/a> integriert, um das Video in der Lightbox abzuspielen<\/a>. Die von Fancybox bereitgestellte Lightbox ist touchf\u00e4hig, reaktionsschnell und vollst\u00e4ndig anpassbar.<\/p>\n
Schreiben wir einen HTML-Code mit Hilfe von Bootstrap und fancybox wie folgt.<\/p>\n
<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.css\" \/>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/css\/bootstrap.min.css\" \/>\n<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<h3 class=\"text-center\">My Video Gallery<\/h3>\n\u00a0\u00a0\u00a0\u00a0<div class=\"row\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach ($arr_video_ids as $video) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$video_id = extractVideoID($video);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$video_thumbnail = getYouTubeThumbnailImage($video_id);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-md-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"pb-2\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<a data-fancybox=\"video-gallery\" href=\"<?php echo $video; ?>\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<img src=\"<?php echo $video_thumbnail; ?>\" class=\"img-thumbnail\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/a>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fancybox\/3.5.7\/jquery.fancybox.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/js\/bootstrap.min.js\"><\/script><\/code><\/pre>\n
Gehen Sie zum Browser und versuchen Sie es. Sie sollten eine funktionierende YouTube-Videogalerie sehen k\u00f6nnen.<\/p>\n
Ich hoffe, Sie verstehen, wie Sie eine YouTube-Videogalerie auf der Website erstellen. Bitte teilen Sie Ihre Gedanken und Vorschl\u00e4ge in einem Kommentar unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n