web-dev-qa-db-ja.com

パラメータでYouTubeの大きな赤い再生ボタンを隠すことは可能ですか？

YouTube iframeを作成するために現在使用しているコードの簡単な例：

player = new YT.Player('[PLAYER ID]', {
  height: '300',
  width: '480',
  videoId: '[VIDEO ID]',
  playerVars: { 'controls': 0, 'showinfo': 0 },
});

これまでのところすべてうまく機能しており、コントロールや情報ストリップなしでビデオを正常にロードしていて、JavaScriptを使用してビデオを「手動」で再生しています。

問題は、ビデオの開始時に一時的に表示される大きな赤い「再生」ボタンが不要になったことです。

enter image description here

これを取り除く方法はありますか？ドキュメントを調べましたが、非表示にできる適切なパラメーターが見つかりません。

javascripthtmlyoutubeyoutube-javascript-api
15
user1017882

不可能だと思いました。したがって、再生ボタンを非表示にする唯一の方法は、以下のようにyoutubeから取得できるビデオの上にビデオ画像を配置することです。各YouTubeビデオには4つの生成画像があります。それらは予想通り次のようにフォーマットされます。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

ただし、オーバーレイを追加したら、コントロールではなく画面をクリックしてもビデオは再生されません。これを行うには、ビデオを再生する次のjQueryを追加します

jQuery('#overlay').click(function(){
  jQuery(this).hide();
  jQuery('#youtube_id').get(0).playVideo();
});
5
Supun Silva

各YouTubeビデオには4つの生成画像があります。それらは予想通り次のようにフォーマットされます。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

リストの最初の画像はフルサイズの画像で、その他はサムネイル画像です。デフォルトのサムネイル画像（つまり、1.jpg、2.jpg、3.jpgのいずれか）は次のとおりです。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

サムネイルの高品質バージョンには、次のようなURLを使用します。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

HQと同様のURLを使用した、中品質のサムネイルバージョンもあります。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

サムネイルの標準定義バージョンでは、次のようなURLを使用します。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

サムネイルの最大解像度バージョンには、次のようなURLを使用します。

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

上記のURLはすべてhttpsでも利用できます。上記のいずれかのURLでhttpをhttpsに変更するだけです。さらに、わずかに短いホスト名i3.ytimg.comが、上記のURL例のimg.youtube.comの代わりに機能します。

または、 YouTube Data API（v3） または以前の YouTube API v2. を使用してサムネイル画像を取得することもできます。

1
Supun Silva