web-dev-qa-db-fra.com

Comment masquer les vidéos associées à la fin du code incorporé d'une liste de lecture YouTube?

J'utilise ce code pour intégrer une liste de lecture:

<iframe width="816" height="459"     
  src="https://www.youtube.com/embed/videoseries?list=xxx" 
  frameborder="0" allowfullscreen="">

Pour masquer les vidéos associées, j'ajoute normalement ?rel=0 (c'est-à-dire dans le cas d'une vidéo intégrée), mais si je l'essaie ici:

<iframe width="816" height="459" src="https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm?rel=0" 
 frameborder="0" allowfullscreen="">
 </iframe>

Je reçois le "mauvais vidéo" écran YouTube flou (désolé, je ne connais pas le terme technique pour cela)!

Il n'y a pas d'option "masquer les liens" dans les paramètres YouTube "AFFICHER PLUS" de la liste de lecture.

videoiframeyoutubeembedplaylist
49
Penanghill

Vous devez utiliser le '&' lorsque vous ajoutez plus de paramètres à l'URL. Mettez à jour le champ src avec ce qui suit.

"https://www.youtube.com/embed/videoseries?list=PL4Zkb_7gMrOzZlVy7jIeCjwScavYp6ssm&rel=0"
77
Saumini Navaratnam

À compter de 25 septembre 2018 , il n'y a aucun moyen de désactiver l'affichage des vidéos en rapport.

Ce changement a pour effet que vous ne pourrez pas désactiver les vidéos associées. Cependant, vous aurez la possibilité de spécifier que les vidéos correspondantes affichées dans le lecteur doivent provenir du même canal que la vidéo qui vient d'être lue.

Pour être plus précis:

  • Avant la modification, si la valeur du paramètre est définie sur 0, le lecteur n’affiche pas les vidéos associées.
  • Après le changement, si le paramètre rel est défini sur 0, le lecteur affichera les vidéos associées du même canal que la vidéo qui vient d'être lue.

emphase supplémentaire

31
Turner Bass

YouTube empêche de cacher les vidéos associées en utilisant rel=0 à partir de septembre 2018.

Toutefois, vous pouvez contourner ce problème en utilisant l'API du lecteur YouTube pour afficher du code HTML personnalisé au lieu de vidéos connexes .

Voici un exemple de code qui affiche un bouton "Replay" personnalisé sur la vidéo une fois celle-ci terminée, masquant les vidéos associées:

<style>
    #playerWrap {
        display: inline-block;
        position: relative;
    }
    #playerWrap.shown::after {
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center; 
        background-size: 64px 64px;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
    }
</style>
<div>
    <div id="playerWrap">
        <iframe
            width="640" height="360"
            src="https://www.youtube.com/embed/0sDg2h3M1RE?enablejsapi=1"
            frameborder="0"
        ></iframe>
    </div>
</div>
<script>
  var playerFrame = document.currentScript.previousElementSibling.children[0].children[0];

  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(playerFrame, {
      videoId: 'M7lc1UVf-VE',
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        document.getElementById("playerWrap").classList.add("shown");
    }
  }

  document.getElementById("playerWrap").addEventListener("click", function() {
    player.seekTo(0);
    document.getElementById("playerWrap").classList.remove("shown");
  });
</script>

Pour le code le plus récent, y compris la version abrégée, la description, la démonstration et les instructions, voir mon article de blog sur le sujet .

6
Maximillian Laumeister

J'ai passé un paramètre supplémentaire en tant que '?rel=0' pour arrêter les vidéos associées.
Cela a fonctionné pour moi

'https://www.youtube.com/embed/'+someValiable_of_video_link+'?rel=0';

L'espoir peut fonctionner pour les autres aussi. & au lieu de ? ne fonctionne pas!

1
S.Yadav