Як створити відеогалерею YouTube для вашого веб-сайту

Останнє оновлення Жов 17, 2021

Зміст

Навіщо потрібна відеогалерея на веб-сайті?

Створіть відеогалерею YouTube за допомогою Bootstrap та fancybox

Ви хочете створити адаптивну відеогалерею YouTube? Можливо, ви захочете перелічити відео YouTube разом на веб-сайті. Звичайний потік для цього – відображення ескізів відео. І коли хтось натискає ескіз, відповідне відео має відтворюватися у спливаючому вікні. З відкритого спливаючого вікна користувачі можуть переходити до наступного та попереднього відео. Це те, як відеогалереї повинні поводитися нормально.

У цій статті я покажу вам, як створити відеогалерею YouTube за допомогою Bootstrap та fancybox.

Навіщо потрібна відеогалерея на веб-сайті?

Відеогалерея використовується для організації вашої колекції відео. Створюючи відеогалерею, ваші користувачі можуть переглядати вашу колекцію відео в одному місці. Окрім цього, можуть бути й інші причини розмістити галерею на веб-сайті. Скажімо, ви завершили ділову подію чи зустрічі, і тепер ви хочете показати всі свої відеозаписи на веб-сайті для користувачів.

Відеогалерея також корисна для збільшення переглядів вашого каналу YouTube.

Сказавши це, давайте подивимося створення відеогалереї YouTube на веб-сайті. Наш остаточний результат буде показано нижче як знімок екрана.

Створіть відеогалерею YouTube за допомогою Bootstrap та fancybox

Я збираюся поставити базовий дизайн для відеогалереї. Мій головний намір – показати вам, як отримати ескізи відео YouTube та як відтворювати відео у fancybox. Користувач повинен додати свій власний стиль до остаточного результату.

Отримайте ескіз відео YouTube

Для початку нам потрібно написати код, який повертає ескіз відео YouTube. Як приклад, я беру кілька своїх відео на YouTube. У наведеному нижче коді я написав метод, який витягує ідентифікатор із URL-адрес відео YouTube і повертає ескіз відео YouTube.

<?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];
}
?>

Метод extractVideoID()повертає ідентифікатор відео з URL-адреси відео. Використовуючи цей ідентифікатор відео, ми отримуємо ескіз відео за допомогою функції getYouTubeThumbnailImage.

Показати галерею

Я перегляну масив відео, отримаю ескіз і розміщу його на сторінці. Роблячи це, я також інтегрував fancybox для відтворення відео у лайтбоксі. Лайтбокс із навороченою коробкою має сенсорний екран, чуйний і повністю налаштовується.

Давайте напишемо HTML за допомогою Bootstrap і fancybox наступним чином.

<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>

Перейдіть до браузера і спробуйте. Ви зможете побачити діючу відеогалерею YouTube.

Сподіваюся, ви розумієте, як створити відеогалерею YouTube на веб-сайті. Будь ласка, поділіться своїми думками та пропозиціями в коментарі нижче.

Пов’язані статті

Джерело запису: artisansweb.net