web-dev-qa-db-ja.com

YouTube埋め込みshowinfoは廃止されました

私たちは、ウェブサイトのYouTubeビデオをヒーローバナーとして使用しています。

しかし数日前に、タイトル、後で見るボタン、共有ボタンが表示されるようになりました。 URLの場合、最後に&showinfo=0を使用してそれらを非表示にすることができました。

showinfo廃止予定 であることがわかりました。したがって、YouTubeのビデオがそこに表示されているという事実を隠すことはできません。

同じことを行うことができる他のパラメータはありますか？

CSSまたはJavaScriptではできませんiframe。

どんなアイデアでも大歓迎です。

UPDATE：

ビデオの読み込み時に情報が表示されるか、ブラウザの外側をクリックすると、ビデオが一時停止して情報が表示されるため、ビデオのレイヤーまたはマスクは役に立ちません。

最上位の〜60pxを非表示にすることはできますが、私にとっては良い解決策ではありません。

youtubeyoutube-apiembed
10
Daut

情報を表示 から直接

注：これは、showinfoパラメーターの非推奨アナウンスです。さらに、relパラメーターの動作が変更されています。タイトル、チャンネル情報、および関連動画はYouTubeのコアユーザーエクスペリエンスの重要な部分であり、これらの変更はYouTubeの視聴エクスペリエンスを異なるプラットフォームで一貫させるのに役立ちます 。

Relパラメーターの動作は、2018年9月25日以降に変更されています。変更の影響は、関連するビデオを無効にできないことです。ただし、プレーヤーに表示される関連動画は、再生されたばかりの動画と同じチャンネルのものであることを指定するオプションがあります。

これは、これが彼らがユーチューブの経験の一部であると考えるものであることを明確に述べています。古い結果をアーカイブするために送信できる回避策や新しいパラメーターの提案はありません。彼らはそれを削除しています。 javascriptとcssを使用してそれを強制しようとした場合、その表示を変更することが許可されていないことを示すTOCに反対することをお勧めします。人々はあなたがYouTubeから何かを見せていることを知っているはずです

12
DaImTo

情報を非表示にする必要がある場合、理想的にはVimeo pro（情報なしの埋め込みを適切にサポート）を選択します。

それ以外の場合は、簡単な回避策があります。

https://jsfiddle.net/10ov5hgw/1/

Iframeの下部と上部の60pxを切り取りますが、上部の見た目の黒いバーではなくオーバーフローを介して、ビデオは常にフルスクリーンに見えます（720を強制した場合、ビデオはほとんど切り取られません）。

このハックは、ビデオの可視領域に大きな影響を与えることなく、モバイルビューもサポートする必要があることをサポートします。

.video-container{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:relative;
}
.video-container iframe,{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container iframe, {
  pointer-events: none;
}
.video-container iframe{
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
}
.video-foreground{
  pointer-events:none;
}

<div class="video-container" >
    <div class="video-foreground">
        <iframe
               src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&mute=1"
               frameBorder="0" allowFullScreen>

        </iframe>
    </div>             
</div>
4
Timo

審美的に最も楽しいと感じた解決策は、動画の上に高解像度のサムネイルを配置し、ホバー時に非表示にすることです。これは、YouTubeのプレビューが低解像度であり、私の意見では安く見えるという問題にも対処しています。

こちらをご覧ください： http://jsfiddle.net/d9D9E/1/

Jsフィドルを表示するためにコードを書く必要がありました：/

.video-thumbnail{
    z-index:300;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.video-thumbnail:hover{
    display:none;
}
2
moritzfelipe

'rel = 0'を持たないことはいらいらしますが、回避策があります。 IFrame APIを使用する場合（iframe ex http://youtu.be/?videoIDxxx .. 。を埋め込むのではなく）、ビデオ、次にIDでビデオをプレーヤーにキューアップします。基本的なプレーヤーについては、 https://developers.google.com/youtube/iframe_api_reference#Playback_controls をご覧ください。

 
....

<div id="player1"></div>

<script type="text/javascript">
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('player1', 
        { 
        videoId: 'YourVideoId',
        events: {
            'onStateChange': onPlayerStateChange
             }
        });

    }; // onYOuTubeIframeAPIReady
                
function onPlayerStateChange(event)
    { 
    // Alt approach //if( event.data  == 0){ location.reload()}
    if( event.data  == 0)
        { player.cueVideoById({videoId:'YourVideoID',
                               suggestedQuality: 'hd720'})
        };
    } 

     </script>
2
msex

私は同じ問題を見ていましたが、見つかった唯一の解決策は、動画を自動再生に設定し、YouTubeボックスの上に透明なレイヤーを配置することでした。

ユーザーはプレーヤーと対話することはできませんが、バナーのような特定の状況では便利です。

残念ながら、コードはstackoverflowで正しく実行されていないようです.jsfiddleも追加します： http://jsfiddle.net/z3dqpuy0/

.yt-cntainer {
  position: relative;
}
                
.yt-mask {
  position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
}
<div class="yt-cntainer">
  <iframe id="vid-player-1" src="https://www.youtube.com/embed/Bey4XXJAqS8?enablejsapi=1&rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0"></iframe>
  <div class="yt-mask"></div>
</div>
2
al404IT

まあ、私もちょうどそれに気づいた。それは美学を吸い込み、台無しにします。だから私はちょうどやった

header {
    /* remove when YT got its brain back */
    margin-top: -56px;
}

showinfo=0を再度追加することを期待しながら。

1
J. Bähr

これはどうですか。ええ、これはビデオをズームします。

iframe {
  transform:scale(1.4);
}
0
Dushan
<div id="schnitt">

<iframe width="500" height="280" src="https://www.youtube.com/embed/rlR4PJn8b8I?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<style>
#schnitt {
height:250px;
overflow:hidden;
}

iframe {
margin-top:-55px;
}
0
Eno B.

注意してください、ドキュメントの翻訳（私はフランス語のみをチェックします）は最新ではありません。

0
user671420
<div id="schnitt">

<iframe width="500" height="280" src="https://www.youtube.com/embed/rlR4PJn8b8I?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<style>
#schnitt {
height:250px;
overflow:hidden;
}

iframe {
margin-top:-55px;
}
   </style>
0
Eno B.