web-dev-qa-db-ja.com

YouTube埋め込み動画：別のサムネイルを設定

私のものではないYouTubeのビデオを埋め込みたい（だからYouTubeで変更できない）。ビデオには、ビデオを代表しないサムネイルがあります（ビデオを埋め込むときに表示される、ユーザーが再生する前に表示される最初の静止画を指します）。

静止画の時間を設定する方法はありますか、たとえば、?s=XXXしかし、これは機能しません。または、YouTubeにネイティブに付属する別の方法はありますか？

videoyoutube
37
user852091

いいえ。ほとんどのYouTubeビデオには、事前に生成された「ポスター」サムネイルが1つ（480x360）しかありません。通常、他のいくつかの低解像度のサムネイル（120x90）があります。そのため、代替のポスター画像を使用する埋め込みパラメーターがあったとしても（そうではありません）、結果は受け入れられません。

理論的にはPlayer APIを使用して、好きな場所にビデオをシークできますが、これは小さな結果をもたらす大きなハックになります。

12
mjhm

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>

注：動画を再生するために2回クリックする必要がないようにするには、autoplay=1ビデオ埋め込みコード内。 2番目のdivが表示されると、再生が開始されます。

24
waldyrious

答えは私にはうまくいきませんでした。たぶんそれらは時代遅れでした。

とにかく、このウェブサイトはあなたのためにすべての仕事をし、さらに不明確な通常のグーグルのドキュメントを読む必要を防ぎさえします： http://www.classynemesis.com/projects/ytembed/

4
Augustin Riedinger

コードをコピーして、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>
3
Muhammad Azeem

あなたの最善の策は、http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-のチュートリアルを使用することですcustom-image /＃comment-7289。これにより、ダブルクリックがなくなり、クリックする前に画像の背後でYouTubeの動画が自動再生されなくなります。

YouTubeの埋め込みコードをYT（YouTube）が提供するので、プラグインしないでください（試してみてくださいが、刺激的です）...代わりに、vidの埋め込みコードのソースを「＆autoplay = 1」（これが最後にあります）。

eg。）

元のコードYT gives：

`<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ソースとパスを独自のものに置き換えてください。

2
user2938361

このツール は、次のコードとしてタスクを達成するのに役立つ次の結果を提供しました。

<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>
1
Janith Chinthana

このソリューションでは、クリックするとビデオが再生されます。ボタン画像を自分で追加するには、画像を編集する必要があります。

写真の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>

上記のスニペットのURL_TO_PICTUREとYOUTUBE_VIDEO_IDを必ず置き換えてください。

ここで何が起こっているのかを明確にするために、これはビデオの上に画像を表示しますが、クリックは画像​​を通過させます。このスクリプトは、ビデオiframeのクリックを監視し、クリックが発生すると画像を非表示にします。 float: clearは必要ないかもしれません。

ここでは他の回答と比較していませんが、これは私が使用したものです。

1
sondra.kinsey

Waldirのソリューションからの自動再生に問題がありました...自動再生を使用すると、divが表示されたときではなく、ページが読み込まれたときにビデオが再生されていました。

このソリューション 私が交換したことを除いて私のために働いた

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

と

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

テキストリンクの代わりにサムネイルを使用するようにします。

1
Makean

このソリューションは、z-indexとホバーを使用したHTMLおよびCSSベースです。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>
0
JustinM

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が必要であり、同じページ上の複数の埋め込みビデオ（異なるリードイメージ）で動作するはずです。

コードは2つの画像を使用しますplay-default.pngおよびplay-active.pngこれは、YouTube再生ボタンの小さな（42 x 30）画像です。 play-default.pngは黒で透明度があり、最初に表示されます。 play-active.pngは赤で、ユーザーが画像上でマウスを動かすと表示されます。これは、通常の埋め込みYouTubeビデオが示す予想される動作を模倣しています。

0
PaulR

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);
0
Dessalegne Chekol