YouTube 嵌入视频：设置不同的缩略图答案

【问题标题】：YouTube embedded video: set different thumbnailYouTube 嵌入视频：设置不同的缩略图
【发布时间】：2011-11-04 04:54:50
【问题描述】：

我想嵌入一个不是我的 YouTube 视频（所以我无法在 YouTube 上更改它）。视频有一个不代表视频的缩略图（我指的是嵌入视频时显示的初始静止图像，在用户播放之前显示）。

有没有办法设置静止的时间，例如我尝试传递?s=XXX，但这不起作用。还是 YouTube 自带的另一种方式？

【问题讨论】：

这篇文章可能会有所帮助-codegena.com/change-youtube-thumbnail-in-embed-player

标签： video youtube

【解决方案1】：

sitepoint forums 中有一个很好的解决方法：

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
   <img src="my_thumbnail.png" style="cursor:pointer" />
</div>
<div style="display:none">
    <!-- Embed code here -->
</div>

注意：为避免必须单击两次才能播放视频，请在视频嵌入代码中使用 autoplay=1。当显示第二个 div 时，它将开始播放。

【讨论】：

以这种方式自动播放视频不适用于 iphone 和 ipad 用户，因为 iOS 会阻止自动播放。stackoverflow.com/questions/12496144/…
即使视频没有显示，视频仍然会播放。这发生在 Mac 上的 Chrome 中，我没有尝试过不同的浏览器或操作系统。
除了显示 div 之外，您还可以（应该）在点击时设置 iframe 的 src（并使用 ?autoplay=1），这会导致视频在点击时播放而不是之前播放。
这是 iOS 上没有自动播放的最新消息 - stackoverflow.com/a/39777974/903324
我认为动态插入 iframe 以自动播放而不是简单地取消隐藏更可靠。

【解决方案2】：

没有。大多数 YouTube 视频只有一个预先生成的“海报”缩略图 (480x360)。它们通常还有其他几个分辨率较低的缩略图 (120x90)。因此，即使有一个嵌入参数来使用备用海报图像（没有），它的结果也是不可接受的。

理论上，您可以使用 Player API 将视频搜索到您想要的任何位置，但这将是一个小问题。

【讨论】：

除了 120x90 的缩略图之外，还有其他可选尺寸的缩略图可用。 stackoverflow.com/questions/2068344/…

【解决方案3】：

答案对我不起作用。也许它们已经过时了。

无论如何，找到了这个网站，它为您完成了所有工作，甚至让您无需阅读像往常一样不清楚的谷歌文档： http://www.classynemesis.com/projects/ytembed/

【讨论】：

【解决方案4】：

只需将代码复制并粘贴到 HTML 文件中即可。并享受快乐的编码。使用 Youtube api 管理 youtube 嵌入视频的缩略图。

<!DOCTYPE html>
<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                }
            });
        }

        function onPlayerReady(event) {
            $('#play_vid').click(function() {
                event.target.playVideo();
            });
        }

        $(document).ready(function() {
            $('#player').hide();
            $('#play_vid').click(function() {
                $('#player').show();
                $('#play_vid').hide();
            });
        });
    </script>

    <div id="player"></div>
    <img id="play_vid" src="YOUR_IMAGE_PATH" />
</body>
</html>

【讨论】：

【解决方案5】：

您最好使用 http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289 上的教程。这将确保没有双击，并且 YouTube 的视频在单击之前不会在您的图像后面自动播放。

不要像 YT(YouTube) 提供的那样插入 YouTube 嵌入代码（您可以尝试，但它会很笨拙）...而只需从您的 vid 的嵌入代码替换源代码 UP TO "&autoplay=1 "（把它留在最后）。

例如）

YT 给出的原始代码：

`<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>`

教程中使用的代码具有相同的 YT src：

`<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess"value="always" /><param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object>`

除此之外，只需将 img 源和路径替换为您自己的，瞧！

【讨论】：

【解决方案6】：

我在使用 waldir 解决方案的自动播放时遇到问题...使用自动播放，视频在页面加载时播放，而不是在 div 显示时播放。

This solution 为我工作，但我替换了

<a class="introVid" href="#video">Watch the video</a></p>

与

<a class="introVid" href="#video"><img src="images/NEWTHUMB.jpg" style="cursor:pointer" /></a>

这样它就会使用我的缩略图代替文本链接。

【讨论】：

【解决方案7】：

This tool 给了我以下结果，这有助于我按照以下代码完成任务。

<div onclick="play();" id="vidwrap" style="height:315px;width:560px;background: black url('http://example.com/image.jpg') no-repeat center;overflow:hidden;cursor:pointer;"></div>
<script type="text/javascript">
    function play(){
        document.getElementById('vidwrap').innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/xxxxxxxxx?autoplay=1" frameborder="0"></iframe>';
    }
</script>

【讨论】：

这是一个非常有用的解决方案。我修改了这个脚本以接受某些参数，包括开始和结束时间：function play(divID,embedID,startTime,endTime){ document.getElementById(divID).innerHTML = '<iframe width="560" height="315" frameborder="0" src="https://www.youtube.com/embed/' + embedID + '?autoplay=1&amp;controls=1&amp;showinfo=0&amp;rel=0&amp;start=' + startTime + '&amp;end=' + endTime + '"></iframe>'; }

【解决方案8】：

此解决方案将在点击时播放视频。您需要自己编辑图片才能添加按钮图片。

您将需要图片的 URL 和 YouTube 视频 ID。 YouTube 视频 ID 是 URL 中 v= 参数之后的部分，因此对于 https://www.youtube.com/watch?v=DODLEX4zzLQ，ID 将是 DODLEX4zzLQ。

<div width="560px" height="315px" style="position: static; clear: both; width: 560px; height: 315px;">&nbsp;<div style="position: relative"><img id="vidimg" width="560px" height="315px" src="URL_TO_PICTURE" style="position: absolute; top: 0; left: 0; cursor: pointer; pointer-events: none; z-index: 2;" /><iframe id="unlocked-video" style="position: absolute; top: 0; left: 0; z-index: 1;" src="https://www.youtube.com/embed/YOUTUBE_VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></div>
<script type="application/javascript">
  // Adapted from https://stackoverflow.com/a/32138108
  var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.id == 'unlocked-video'){
      document.getElementById('vidimg').style.display='none';
      clearInterval(monitor);
    }
  }, 100);
</script>

请务必替换上述 sn-p 中的 URL_TO_PICTURE 和 YOUTUBE_VIDEO_ID。

为了澄清这里发生了什么，这会在视频顶部显示图像，但允许点击穿过图像。该脚本监视视频 iframe 中的点击，然后在发生点击时隐藏图像。您可能不需要float: clear。

我没有将此与此处的其他答案进行比较，但这是我使用的。

【讨论】：

【解决方案9】：

使用 waldyrious 的回答中的概念，我创建了以下解决方案，该解决方案还解决了在选项卡还原上的图像后面播放视频或使用浏览器的后退按钮返回包含视频的页面的问题。

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>

“隐藏”类来自 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，它们是 YouTube 播放按钮的小 (42 x 30) 图片。 play-default.png 是黑色的，具有一定的透明度，最初显示。 play-active.png 是红色的，当用户将鼠标移到图像上时显示。这种模仿是普通嵌入式 YouTube 视频所表现出的预期行为。

【讨论】：

【解决方案10】：

可以使用 jQuery，这取决于您的网站加载时间，您可以调整超时。它可以是您的自定义图像，也可以使用 youtube 图像 maxres1.jpg、maxres2.jpg 或 maxres3.jpg

var newImage = 'http://i.ytimg.com/vi/[Video_ID]/maxres1.jpg';
window.setTimeout(function() {
jQuery('div > div.video-container-thumb > div > a > img').attr('src',newImage );
}, 300);

【讨论】：

【解决方案11】：

此解决方案是基于 HTML 和 CSS 使用 z-index 和悬停，如果 JS 被禁用或视频不是你的（因为你可以在 YouTube 中添加缩略图）。

<style>
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
}
.videoWrapper .video-modal-poster img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.videoWrapper .video-modal-poster:hover img {
  z-index:0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
<div class="videoWrapper">
  <a href="#" class="video-modal-poster">
    <img alt="" src="" width="353" height="199" />
    <iframe width="353" height="199" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  </a>
</div>

【讨论】：

当您将鼠标移到图像上时，将切换 youtube图像。只有当鼠标在图像上时才会播放视频。不是一个选项。