web-dev-qa-db-fra.com

Vidéo intégrée YouTube: définir une vignette différente

Je souhaite intégrer une vidéo de YouTube qui n'est pas la mienne (je ne peux donc pas la modifier sur YouTube). La vidéo a une vignette qui n'est pas représentative de la vidéo (je me réfère à la photo initiale qui apparaît lorsque vous intégrez une vidéo, affichée avant que l'utilisateur la lit). 

Existe-t-il un moyen de définir l'heure du still, par exemple, j'ai essayé de passer ?s=XXX mais cela ne fonctionne pas. Ou une autre façon qui vient naturellement avec YouTube? 

videoyoutube
31
user852091

Non. La plupart des vidéos YouTube ont une seule vignette "affiche" pré-générée (480x360). Ils ont généralement plusieurs autres vignettes de résolution inférieure (120x90). Ainsi, même s'il existait un paramètre d'incorporation permettant d'utiliser une autre image d'affiche (ce qui n'existe pas), le résultat ne serait pas acceptable. 

Vous pouvez théoriquement utiliser l'API de lecteur pour rechercher la vidéo dans l'emplacement de votre choix, mais cela constituerait un piratage majeur pour un résultat mineur.

11
mjhm

Il existe une solution de contournement intéressante pour cela dans les forums de sitepoint :

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

Remarque: pour éviter d'avoir à cliquer deux fois pour faire jouer la vidéo, utilisez autoplay=1 dans le code d'intégration de la vidéo. Il commencera à jouer lorsque le deuxième div est affiché.

24
waldyrious

Il suffit de copier et coller le code dans un fichier HTML. et profitez du joyeux codage . Utilisation de Youtube api pour gérer la vignette d'une vidéo intégrée 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

Votre meilleur choix serait d'utiliser le didacticiel sur http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289 . Cela garantira qu'il n'y a pas de double-clic et que la vidéo de YouTube ne se lit pas automatiquement derrière votre image avant de la cliquer. 

Ne branchez pas le code d'intégration YouTube tel que YT (YouTube) vous le donne (vous pouvez essayer, mais ce sera ganky) ... au lieu de cela, remplacez simplement la source à partir du code d'intégration de votre vidéo. UP TO "& autoplay = 1" (laissez ceci sur la fin comme c'est). 

par exemple.)

Le code original YT donne:

`<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 utilisé dans le tutoriel avec le même 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>`

En dehors de cela, il suffit de remplacer la source et le chemin img par le vôtre, et le tour est joué!

2
user2938361

Cet outil m'a donné les résultats suivants qui m'aident à accomplir la tâche en tant que code suivant.

<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

Cette solution lira la vidéo en cliquant dessus. Vous devrez modifier votre image pour ajouter une image de bouton vous-même.

Vous aurez besoin de l'URL de votre photo et de l'ID de la vidéo YouTube. L'id de la vidéo YouTube est la partie de l'URL après le paramètre v=. Par conséquent, pour https://www.youtube.com/watch?v=DODLEX4zzLQ l'ID serait 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>

Assurez-vous de remplacer URL_TO_PICTURE et YOUTUBE_VIDEO_ID dans l'extrait de code ci-dessus.

Pour clarifier ce qui se passe ici, cela affiche l'image en haut de la vidéo, mais permet aux clics de la traverser. Le script surveille les clics dans l'iframe vidéo, puis masque l'image en cas de clic. Vous n'avez peut-être pas besoin du float: clear.

Je n'ai pas comparé cela aux autres réponses ici, mais c'est ce que j'ai utilisé.

1
sondra.kinsey

J'avais des problèmes avec la lecture automatique de la solution de waldir ... à l'aide de la lecture automatique, la vidéo était lue au moment du chargement de la page, et non à l'affichage du div.

Cette solution a fonctionné pour moi sauf que j'ai remplacé

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

avec

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

afin qu'il utilise ma vignette à la place du lien de texte.

1
Makean

Cette solution est basée sur HTML et CSS à l'aide de z-index and hover, qui fonctionne si JS est désactivé ou si la vidéo ne vous appartient pas (vous pouvez ajouter une vignette sur 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

En utilisant le concept de la réponse de waldyrious, j'ai créé la solution suivante qui aborde également le problème de la lecture de la vidéo derrière l'image sur l'onglet de restauration ou l'utilisation du bouton de retour du navigateur pour revenir à la page contenant la vidéo.

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>

La classe "hide" provient de Bootstrap et applique simplement display: none; afin que l'image ne soit pas visible au chargement de la page si JavaScript est désactivé.

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 est requis pour cette solution et doit fonctionner avec plusieurs vidéos incorporées (avec différentes images de plomb) sur la même page.

Le code utilise deux images play-default.png et play-active.png, qui sont de petites images (42 x 30) du bouton de lecture de YouTube. play-default.png est noir avec une certaine transparence et s’affiche initialement. play-active.png est en rouge et s'affiche lorsque l'utilisateur déplace la souris sur l'image. Cette imitation est le comportement attendu d'une vidéo YouTube intégrée normale.

0
PaulR

Il est possible d'utiliser jQuery, cela dépend du temps de chargement de votre site. Vous pouvez ajuster votre délai d'expiration. Ce peut être votre image personnalisée ou vous pouvez utiliser l’image youtube maxres1.jpg, maxres2.jpg ou 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