YouTube встроенное видео: установить другой эскиз

Question

Я хочу добавить видео с YouTube, которое не мое (поэтому я не могу изменить его на YouTube).Видео имеет миниатюру, которая не является репрезентативной для видео (я имею в виду исходный кадр, который отображается при вставке видео, показанного до того, как пользователь его воспроизводит).

Есть ли способ установить время стоп-кадра, например, я попытался передать ?s=XXX, но это не работает.Или другой способ, который изначально присутствует на YouTube?

Answer 1

Используя концепцию из ответа Уолдириуса, я создал следующее решение, которое также решает проблему воспроизведения видео за изображением на вкладке восстановления или с помощью кнопки назад браузера, чтобы вернуться на страницу с видео.

HTML

<div class="js-video-lead">
  <img class="hide" src="link/to/lead/image.jpg" />
  <iframe frameborder="0" height="240" src="https://www.youtube.com/embed/<code here>" width="426"></iframe>
</div>

Класс "hide" из Bootstrap и просто применяет display: none;, чтобы изображение не отображалось при загрузке страницы, если JavaScript отключен.

JavaScript

function video_lead_play_state(element, active)
{
    var $active = $(element).closest(".js-video-lead").find(".btn-play-active");
    var $default = $(element).closest(".js-video-lead").find(".btn-play-default");

    if (active) {
        $active.show();
        $default.hide();
    } else {
        $active.hide();
        $default.show();
    }
}


$(document).ready(function () {
    // hide the videos and show the images
    var $videos = $(".js-video-lead iframe");
    $videos.hide();
    $(".js-video-lead > img").not(".btn-play").show();

    // position the video holders
    $(".js-video-lead").css("position", "relative");

    // prevent autoplay on load and add the play button
    $videos.each(function (index, video) {
        var $video = $(video);

        // prevent autoplay due to normal navigation
        var url = $video.attr("src");
        if (url.indexOf("&autoplay") > -1) {
            url = url.replace("&autoplay=1", "");
        } else {
            url = url.replace("?autoplay=1", "");
        }
        $video.attr("src", url).removeClass(
            "js-video-lead-autoplay"
        );

        // add and position the play button
        var top = parseInt(parseFloat($video.css("height")) / 2) - 15;
        var left = parseInt(parseFloat($video.css("width")) / 2) - 21;
        var $btn_default = $("<img />").attr("src", "play-default.png").css({
            "position": "absolute",
            "top": top + "px",
            "left": left + "px",
            "z-index": 100
        }).addClass("btn-play btn-play-default");
        var $btn_active = $("<img />").attr("src", "play-active.png").css({
            "display": "none",
            "position": "absolute",
            "top": top + "px",
            "left": left + "px",
            "z-index": 110
        }).addClass("btn-play btn-play-active");
        $(".js-video-lead").append($btn_default).append($btn_active);
    });


    $(".js-video-lead img").on("click", function (event) {
        var $holder = $(this).closest(".js-video-lead");
        var $video = $holder.find("iframe");
        var url = $video.attr("src");
        url += (url.indexOf("?") > -1) ? "&" : "?";
        url += "autoplay=1";
        $video.addClass("js-video-lead-autoplay").attr("src", url);
        $holder.find("img").remove();
        $video.show();
    });

    $(".js-video-lead > img").on("mouseenter", function (event) {
        video_lead_play_state(this, true);
    });

    $(".js-video-lead > img").not(".btn-play").on("mouseleave", function (event) {
        video_lead_play_state(this, false);
    });
});

Для этого решения требуется jQuery, и он должен работать с несколькими встроенными видео (с разными начальными изображениями) на одной странице.

В коде используются два изображения play-default.png и play-active.png, которые являются небольшими (42 х 30) изображениями кнопки воспроизведения YouTube. play-default.png черный с некоторой прозрачностью и отображается изначально. play-active.png имеет красный цвет и отображается, когда пользователь наводит указатель мыши на изображение. Это имитирует ожидаемое поведение обычного встроенного видео YouTube.