web-dev-qa-db-fra.com

Comment désactiver les "vidéos associées" à partir d'une liste de lecture YouTube intégrée

J'ai besoin d'intégrer une liste de lecture Youtube sur un iframe. Je ne veux pas que l'utilisateur puisse quitter cette liste de lecture, je dois donc désactiver les fonctionnalités "vidéo associée" et "plus de vidéo" (celle qui affiche plus de vidéos lorsque la vidéo est arrêtée et celle qui les affiche lorsque la vidéo est terminée).

J'ai testé certaines solutions de contournement, mais elles ne fonctionnaient que pour des vidéos uniques (pas pour des listes de lecture) et la plupart d'entre elles ont cessé de fonctionner après avoir changé la manière ?rel=0 se comporte. Y a-t-il un moyen de faire ça?

Voici mon code:

.rep {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 1280px;
   height: 640px;
   z-index: 6;
}

<iframe class="rep" src="https://www.youtube.com/embed/videoseries?list=PLUl4u3cNGP63gFHB6xb-kVBiQHYe_4hSi" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

EDIT: Les vidéos doivent être affichées dans l'ordre, donc je ne peux pas utiliser rel pour afficher uniquement les vidéos de la playlist. De plus, si vous cliquez dessus, une page YouTube en dehors de l'iframe apparaîtra.

javascripthtmlcssiframeyoutube
10
Luis Fernandez

Si je regarde à travers les documents Lecteurs et paramètres intégrés YouTube , il n'y a rien de tel pour commander la section plus de vidéos si vous mettez la vidéo en pause.

Les deux paramètres que je vous propose de vous rapprocher le plus possible de votre objectif sont:

Vous pouvez ajouter:

  • listType=playlist
  • rel=0 pour désactiver les vidéos associées dans la section plus de vidéos.

Remarque: Le comportement de rel=0 sera supprimé après le 25 septembre 2019.

Conclusion:

Il semble que ce que vous voulez réaliser ne soit pas possible. Avec l'iframe intégré par défaut de YouTube.

Vous voudrez peut-être envisager de regarder d'autres joueurs avec des options de liste de lecture. Quelque chose comme JW Player notez que vous avez besoin d'une licence pour ce lecteur, Documents de playlist JW Player . J'ai également lu sur JW Player, ils ne prennent actuellement pas en charge les vidéos YouTube.

Mais il y a peut-être d'autres joueurs qui ont le même fonctionnement gratuitement.

8
Davy de Vries

Si vous ajoutez &rel=0 à la fin du lien de la playlist - dans les vidéos associées, seules les vidéos de votre playlist seront affichées. Exemple:

<iframe class="rep" src="https://www.youtube.com/embed/videoseries?list=PLUl4u3cNGP63gFHB6xb-kVBiQHYe_4hSi&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Si vous supprimez &rel=0 à partir du lien, il montre des vidéos aléatoires de YouTube

3
Alan Lee

Voici une solution de contournement pas la meilleure, mais cela les empêchera de gêner les recommandations. Il boucle la liste de lecture sans jamais laisser YouTube s'arrêter et vous donne des recommandations pour que les utilisateurs reviennent sur YouTube. Cela a bien fonctionné pour moi. Si vous voyez qu'il joue ma liste dans la boucle, puis joue la suivante, le tout sans jamais faire apparaître les recommandations. si vous l'arrêtez, il reste là. J'espère que cela aide la clé est 0 & boucle https://codesandbox.io/s/adoring-tereshkova-nwv8i

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
<iframe width="100%" height="425" src="https://www.youtube.com/embed/HdEN2JinZVE?autoplay=&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>
    <script src="src/index.js">
    </script>
</body>

</html>
2
Joshua Aguilar

Cela ne peut pas être fait après le 25 septembre 2018 . L'effet de la modification est que vous ne pourrez pas désactiver les vidéos associées. Vous trouverez ci-dessous le lien de publication officiel de YouTube.

Lien officiel: https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018

Merci

1
Kapil Yadav

Je viens de trouver un excellent site Web qui a trouvé une solution à votre problème. Le code est un peu long, mais je pense que cela fonctionne. Ils ont un exemple si vous faites défiler un peu. https://www.maxlaumeister.com/blog/hide-related-videos-in-youtube-embeds/#hideyt-embed-code

<!-- https://maxl.us/hideyt -->
<style>
    .hytPlayerWrap {
        display: inline-block;
        position: relative;
    }

    .hytPlayerWrap.ended::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==);
    }

    .hytPlayerWrap.paused::after {
        content: "";
        position: absolute;
        top: 70px;
        left: 0;
        bottom: 50px;
        right: 0;
        cursor: pointer;
        background-color: black;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 40px 40px;
        background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
    }
</style>
<div class="hytPlayerWrapOuter">
    <div class="hytPlayerWrap">
        <iframe width="640" height="360" src="https://www.youtube.com/embed/`**YOUR VIDEO ID HERE**`?rel=0&enablejsapi=1" frameborder="0"></iframe>
    </div>
</div>
<script>
    "use strict";
    document.addEventListener('DOMContentLoaded', function () {
        if (window.hideYTActivated) return;
        let onYouTubeIframeAPIReadyCallbacks = [];
        for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
            let playerFrame = playerWrap.querySelector("iframe");
            let tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            let firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            let onPlayerStateChange = function (event) {
                if (event.data == YT.PlayerState.ENDED) {
                    playerWrap.classList.add("ended");
                } else if (event.data == YT.PlayerState.PAUSED) {
                    playerWrap.classList.add("paused");
                } else if (event.data == YT.PlayerState.PLAYING) {
                    playerWrap.classList.remove("ended");
                    playerWrap.classList.remove("paused");
                }
            };
            let player;
            onYouTubeIframeAPIReadyCallbacks.Push(function () {
                player = new YT.Player(playerFrame, {events: {'onStateChange': onPlayerStateChange}});
            });
            playerWrap.addEventListener("click", function () {
                let playerState = player.getPlayerState();
                if (playerState == YT.PlayerState.ENDED) {
                    player.seekTo(0);
                } else if (playerState == YT.PlayerState.PAUSED) {
                    player.playVideo();
                }
            });
        }
        window.onYouTubeIframeAPIReady = function () {
            for (let callback of onYouTubeIframeAPIReadyCallbacks) {
                callback();
            }
        };
        window.hideYTActivated = true;
    });
</script>
1
Rojo

Malheureusement, les CSS ou JS externes ne peuvent pas être appliqués aux vidéos iframe ou au contenu iframe dans une page Web.

Pour l'instant, vous pouvez ajouter rel=0 paramètre de l'URL de la vidéo dans le code iframe. Selon les documentations YouTube, rel=0le paramètre sera désactivé après le 25 septembre 2019 .

Voici un exemple avec le paramètre rel = 0

<iframe width="560" height="315" src="https://www.youtube.com/embed/J8Rt6HSzrqY&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Vous pouvez également utiliser la fonction ou le paramètre de liste de lecture. Voir l'exemple ci-dessous:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Le code ci-dessus est tiré des documents officiels de support Youtube. Vous ne pouvez ajouter qu'une seule vidéo dans la liste afin qu'elle ne lise aucune autre vidéo une fois la vidéo en cours terminée.

1
Optimum Creative