web-dev-qa-db-ja.com

埋め込みYouTubeプレイリストから「関連動画」を無効にする方法

YouTubeプレイリストをiframeに埋め込む必要があります。ユーザーがこのプレイリストを終了できないようにしたいので、「関連動画」機能と「その他の動画」機能（動画が停止したときにより多くの動画を表示する機能と、動画を停止したときに表示する機能）を無効にする必要がありますビデオが終了しました）。

私はいくつかの回避策をテストしましたが、それらは単一の動画（プレイリストではなく）でのみ機能し、方法の変更後にほとんどが機能しなくなりました?rel=0動作します。これを行う方法はありますか？

これは私のコードです：

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

編集：動画は順番に表示する必要があるため、relを使用して再生リストの動画のみを表示することはできません。さらに、それらをクリックすると、iframe外のYouTubeページが表示されます。

javascripthtmlcssiframeyoutube
10
Luis Fernandez

YouTube埋め込みプレーヤーとプレーヤーパラメーター ドキュメントを確認すると、動画を一時停止した場合、追加の動画セクションを注文することはできません。

私があなたの目標にできるだけ近づくために私が提案する2つのパラメータは次のとおりです：

あなたは付け加えられます：

  • listType=playlist
  • rel=0をクリックすると、その他の動画セクションの関連動画がオフになります。

注：rel=0の動作は2019年9月25日以降に削除されます。

結論：

あなたが達成したいことは不可能のようです。 YouTubeのデフォルトの埋め込みiframe。

プレイリストオプションを使用して他のプレーヤーを探すことを検討することもできます。 JW Playerのようなものは、このプレーヤーのライセンスが必要であることに注意してください JW Player playlist docs 。 私もJW Playerでいくつかの読書をしました、彼らは現在YouTube動画をサポートしていません。

しかし、多分無料で同じ機能を持つ他のプレイヤーがいます。

8
Davy de Vries

プレイリストリンクの最後に&rel=0を追加すると、関連する動画には、プレイリストの動画のみが表示されます。例：

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

リンクから&rel=0を削除すると、YouTubeのランダムな動画が表示されます

3
Alan Lee

これは最善ではない回避策ですが、推奨事項を煩わせません。これは再生リストをループし、YouTubeに停止する機会を与えず、ユーザーをYouTubeに戻すための推奨事項を提供します。これは私にはうまくいきました。あなたがループで私のリストを再生し、次に次を再生するのを見た場合、すべて推奨事項を表示することなく、すべてを再生します。あなたがそれを止めれば、それはそこにとどまります。キーが0＆loophttps://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

2018年9月25日以降はできません。変更の影響は、関連する動画を無効にできないことです。以下はそのYouTube公式投稿リンクです。

公式リンク：https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018

ありがとう

1
Kapil Yadav

私はあなたの問題の修正を見つけた素晴らしいウェブサイトを見つけました。コードは少し長いですが、うまくいくと思います。少し上にスクロールすると例が表示されます。 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

残念ながら、外部のCSSまたはJSは、Webページのiframeビデオまたはiframeコンテンツに適用できません。

今のところ、rel=0パラメータをiframeコードの動画URLに追加します。 YouTubeのドキュメントに従って、rel=02019年9月25日以降、パラメーターは無効になります 。

これは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>

プレイリスト機能またはパラメーターを使用することもできます。以下の例をご覧ください。

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

上記のコードは、公式のYouTubeサポートドキュメントから抜粋したものです。現在のビデオが終了した後に他のビデオを再生しないように、リストに追加できるビデオは1つだけです。

1
Optimum Creative