it-swarm.com.de

In YouTube eingebettetes Video: Unterschiedliches Miniaturbild festlegen

Ich möchte ein Video von YouTube einbetten, das nicht mir gehört (daher kann ich es nicht bei YouTube ändern). Das Video hat eine Miniaturansicht, die nicht repräsentativ für das Video ist (ich beziehe mich auf das erste Standbild, das beim Einbetten eines Videos angezeigt wird, bevor der Benutzer es abspielt). 

Gibt es eine Möglichkeit, die Zeit des Standbilds einzustellen, zum Beispiel habe ich versucht, ?s=XXX zu übergeben, aber das funktioniert nicht. Oder eine andere Möglichkeit, die bei YouTube nativ ist? 

31
user852091

Die meisten YouTube-Videos verfügen nur über ein vorab generiertes Miniaturbild "Poster" (480x360). Sie haben normalerweise mehrere andere Miniaturansichten mit niedrigerer Auflösung (120x90). Selbst wenn es einen Einbettungsparameter für die Verwendung eines alternativen Posterbilds gäbe (was es nicht gibt), wäre das Ergebnis nicht akzeptabel. 

Sie können die Player-API theoretisch verwenden, um das Video an einem beliebigen Ort zu suchen, aber dies wäre ein großer Hacker für ein kleines Ergebnis.

11
mjhm

In den sitepoint-Foren gibt es eine nette Lösung für dieses Problem:

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

Hinweis: Um zu vermeiden, dass Sie zweimal auf das Video klicken müssen, verwenden Sie autoplay=1 im Video-Einbettungscode. Es wird abgespielt, wenn das zweite Div angezeigt wird.

24
waldyrious

Die Antworten funktionierten nicht für mich. Vielleicht waren sie veraltet.

Wie auch immer, fand diese Website, die die ganze Arbeit für Sie erledigt, und verhindert sogar, dass Sie die unklare Google-Dokumentation lesen müssen: http://www.classynemesis.com/projects/ytembed) /

5

Kopieren Sie einfach den Code und fügen Sie ihn in die HTML-Datei ein. und genießen Sie die glückliche Kodierung . Verwenden Sie Youtube-API, um die Miniaturansicht des eingebetteten Videos von YouTube zu verwalten.

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

Am besten verwenden Sie das Tutorial für http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289 . Dadurch wird sichergestellt, dass kein Doppelklick erfolgt und YouTube-Videos nicht automatisch hinter Ihrem Bild abgespielt werden, bevor Sie darauf klicken. 

Stecken Sie den YouTube-Einbettungscode nicht ein, wie es von YT (YouTube) angegeben wird (Sie können es versuchen, aber es wird ganky). Stattdessen ersetzen Sie einfach den Quellcode aus dem Einbettungscode Ihres Videos. UP "& autoplay = 1" dies am Ende so wie es ist). 

z.B.)

Originalcode YT ergibt:

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

Code, der im Lernprogramm mit der gleichen YT Quelle verwendet wird:

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

Andernfalls ersetzen Sie einfach die Quelle und den Pfad img durch Ihre eigene und voilà!

2
user2938361

Dieses Tool hat mir folgende Ergebnisse geliefert, die mir dabei helfen, die Aufgabe als folgenden Code zu erfüllen.

<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

Diese Lösung spielt das Video ab, wenn Sie darauf klicken. Sie müssen Ihr Bild bearbeiten, um selbst ein Schaltflächenbild hinzuzufügen.

Sie benötigen die URL Ihres Bildes und die YouTube-Video-ID. Die YouTube-Video-ID ist der Teil der URL nach dem v=-Parameter. Für https://www.youtube.com/watch?v=DODLEX4zzLQ wäre die 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>

Stellen Sie sicher, dass Sie URL_TO_PICTURE und YOUTUBE_VIDEO_ID im obigen Snippet ersetzen.

Um zu verdeutlichen, was hier vor sich geht, wird das Bild oben auf dem Video angezeigt, jedoch können Klicks das Bild passieren. Das Skript überwacht die Klicks im Video-Iframe und blendet dann das Bild aus, wenn ein Klick erfolgt. Möglicherweise benötigen Sie den float: clear nicht.

Ich habe das nicht mit den anderen Antworten hier verglichen, aber das habe ich verwendet.

1
sondra.kinsey

Ich hatte Probleme mit der automatischen Wiedergabe von Waldirs Lösung. Bei der automatischen Wiedergabe wurde das Video beim Laden der Seite abgespielt, nicht wenn das Div angezeigt wurde.

Diese Lösung arbeitete für mich außer ich ersetzte

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

mit

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

so dass mein Thumbnail anstelle des Textlinks verwendet wird.

1
Makean

Diese Lösung basiert auf HTML und CSS und verwendet z-index und hover. Dies funktioniert, wenn JS deaktiviert ist oder das Video nicht Ihrem gehört (da Sie in YouTube ein Miniaturbild hinzufügen können).

<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

Mit dem Konzept aus der Antwort von waldyrious habe ich die folgende Lösung entwickelt, die sich auch mit dem Problem befasst, dass das Video beim Wiederherstellen des Registers wiedergegeben wird oder mit der Zurück-Schaltfläche des Browsers auf die Seite mit dem Video zurückkehrt.

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>

Die "hide" -Klasse stammt von Bootstrap und wendet einfach display: none; an, so dass das Bild beim Laden der Seite nicht sichtbar ist, wenn JavaScript deaktiviert ist.

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 ist für diese Lösung erforderlich und sollte mit mehreren eingebetteten Videos (mit unterschiedlichen Leitbildern) auf derselben Seite funktionieren.

Der Code verwendet zwei Bilder play-default.png und play-active.png, bei denen es sich um kleine Bilder (42 x 30) der YouTube-Wiedergabetaste handelt. play-default.png ist schwarz mit etwas Transparenz und wird anfänglich angezeigt. play-active.png ist rot und wird angezeigt, wenn der Benutzer die Maus über das Bild bewegt. Dies ist das erwartete Verhalten, das ein normales eingebettetes YouTube-Video aufweist.

0
PaulR

Mit jQuery ist es möglich, abhängig von der Ladezeit Ihrer Site können Sie Ihr Timeout anpassen. Es kann ein benutzerdefiniertes Bild sein oder Sie können das YouTube-Bild maxres1.jpg, maxres2.jpg oder maxres3.jpg verwenden

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