Как вывести на сайте виде с youtube со своим превью

25.09.2022

Бывает, что нужно вставить на страницу сайта видео с YouTube, но если использовать обычный метод "embedded code":

pic1

то его обложка может быть не подходящей:

pic1

Есть разные способы, мне понравился разместит на старице любую картинку, наложить на нее кнопку "paly", а при нажатии открывать модальное окно. Единственный момент, что видео, описание и заголовок, у каждого виде свои.

Для диалогового окна буду использовать компонент из Bootstrap 4.

Пример html для вывода элементов (код упрощен, нет экранирования и проверок):

 
<div class="items">
    <?
    foreach($this->items as $item)
    {
        $sLink = str_replace('https://www.youtube.com/watch?v=', '', $item->link);
        ?>
        <div class="item" data-toggle="modal" data-target="#modalVideo"
             data-id="<?=$sLink?>"
             data-title="<?=$item->title?>"
             data-text="<?=$item->short_text?>"
        >

            <div class="img">
                <img src="<?=$item->pic?>" alt="<?=$item->title?>" />
            </div>
            <div class="title">
                <?=$item->title?>
            </div>
        </div>
        <?
    }
    ?>
</div

Код диалога:

 
<div class="modal" tabindex="-1" id="modalVideo">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="container">
                    <div class="row col-md-12">
                        <h5 class="modal-title"></h5>
                    </div>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-iframe so_iframe">
                    <iframe src="https://www.youtube.com/embed/..." title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="modal-text"></div>
            </div>
        </div>
    </div>
</div>

И основной код на JavaScript:

 
let modalVideo = $('#modalVideo');
modalVideo.on('show.bs.modal', function (event) {
    let el = $(event.relatedTarget),
        id = el.data("id"),
        title = el.data("title"),
        text = el.data("text"),
        elTitle = $(".modal-title", modalVideo),
        elText = $(".modal-text", modalVideo),
        elIframe = $("iframe", modalVideo),
        YLink = 'https://www.youtube.com/embed/' + id
    ;

    elTitle.html(title);
    elText.html(text);
    elIframe.attr("src", YLink);
})

- отслеживаем событие show.bs.modal, которое наступает когда должно открыться модальное окно Bootstrap 4, подтягиваем и подставляем нужные данные.

Категории: Web, CSS, JQuery
Пометки: Как вывести YouTube виде во всплывающем окне со своем preview
Яндекс.Метрика