web-dev-qa-db-fra.com

youtube iframe api paramètre rel = 0 ne fonctionne pas

J'ai besoin de cacher les vidéos liées après avoir regardé la vidéo. J'ai mis rel=0, mais cela ne fonctionne pas. J'utilise cette page pour les tests. La valeur de la case à cocher rel n'affecte pas les vidéos associées affichées après avoir regardé la vidéo.

Cela ne fonctionne pas dans Google Chrome. Dans Mozilla Firefox, cela fonctionne correctement.

youtube-iframe-api
7
Viktor

À compter du 25 septembre 2018, vous ne pourrez pas désactiver les vidéos associées. Au lieu de cela, si le paramètre rel est défini sur 0, les vidéos en rapport proviendront du même canal que celui qui vient d'être lu . YouTube API

8
Irina Kovalchuk

En effet, vous êtes probablement connecté à votre navigateur Chrome, mais pas à votre navigateur Firefox. 

&rel=0 ne fonctionne que lorsqu'il n'est pas connecté. Cependant, vous pouvez contourner cela en utilisant le mode de confidentialité amélioré:

https://www.youtube-nocookie.com/embed/[id]?rel=0

0
Chris

Ici j'ai trouvé une solution. stopVideo sur l'état du joueur a été remplacé par ENDING

<!DOCTYPE html>
<html>
<head>
    <title>Alternative to hide Related Video & Info</title>
    <script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>

<div id="playerWrapOuter">
    <div id="playerWrap">
        <?php 
            $embed = '<iframe width="560" height="315" src="https://www.youtube.com/embed/HjxYvcdpVnU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
            preg_match('/src="(.+?)"/', $embed, $matches);
            $src = $matches[1];
            $params = array(
                'width'          => "640",
                'height'         => "360",
                'enablejsapi'    => 1,
                'rel'            => 0,
                'modestbranding' => 1,
                'showinfo'       => 0,
            );


            $querystring  = http_build_query($params, $src);
            $new_src = $src.'?'. $querystring;
            $embed = str_replace($src, $new_src, $embed);
            $embed = str_replace( '<iframe ', '<iframe ', $embed );

            echo $embed; 
        ?>
    </div>
</div>
<script>
    (function() {
        var player;
        var playerFrame = document.currentScript.previousElementSibling.querySelector("iframe");

        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player(playerFrame, {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        };
        window.onPlayerStateChange = function(event) {
            if (event.data == YT.PlayerState.ENDED) {
                player.stopVideo();
            }
        };

    })();
</script>
</body>
</html>

Voici une démo de violon: https://jsfiddle.net/Aishan/znabhuo2/ Espérons que cela aide !!

0
Aishan

YouTube a modifié le paramètre rel=0 à compter de septembre 2018 afin qu'il ne désactive plus totalement les vidéos associées. 

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 détaillé avec une description, des détails et des instructions supplémentaires, voir mon article de blog sur le sujet .

0
Maximillian Laumeister

Si vous souhaitez masquer la vidéo associée, appelez "player.stopVideo ()" lorsque l'état du lecteur est terminé "PlayerState.ENDED".

PS: Désolé, l'anglais n'est pas ma langue maternelle.

0
Artur

Le mien ne fonctionnait pas parce que le code venait de la page dev https://developers.google.com/youtube/youtube_player_demo

était incomplet et manque la balise de fermeture!

 enter image description here

0
Morgan Seibert