YTPlayer使用方法とプロパティ

2023年2月6日 14:30

Webページで背景にYouTubeを再生する、YTPlayerの導入覚え書きです。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YTPlayer</title>
<style>
    html,body {
        margin:0;
        padding:0;
    }
    #youtube-area {
        width:100%;
        height:100dvh;
        background-position: center center;
        background-size: cover;
    }
</style>
</head>
<body>
<div id="youtube-area">
<div id="youtube" data-property="{
videoURL: '動画ID',
startAt: 0,
coverImage : 'カバーイメージURL',
containment: '#youtube-area',
autoPlay: true,
loop: 1,
mute: true,
abundance : 0, //倍率　デフォルトは0.3
playsinline: 1,
optimizeDisplay: true,
opacity: 1,
showControls: false,
showYTLogo: false,
useOnMobile : true,
onReady: function() {
$('#loading').fadeOut();
}
}"></div>
<div id="loading">Now Loading・・・</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js" integrity="sha512-rVFx7vXgVV8cmgG7RsZNQ68CNBZ7GL3xTYl6GAVgl3iQiSwtuDjTeE1GESgPSCwkEn/ijFJyslZ1uzbN3smwYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function(){
$("#youtube").YTPlayer();
});
</script>
</body>
</html>

YTPlayer読み込みJavaScriptコードのみ

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.9/jquery.mb.YTPlayer.min.js" integrity="sha512-rVFx7vXgVV8cmgG7RsZNQ68CNBZ7GL3xTYl6GAVgl3iQiSwtuDjTeE1GESgPSCwkEn/ijFJyslZ1uzbN3smwYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(function(){
  $("#youtube-area").YTPlayer();
});
</script>

YTPlayerホームページ

YTPlayerプロパティ設定

videoURL (string)

Youtube の動画のURL、短縮 URL、または videoID を指定します。
デフォルト　videoURL: null

videoURL: 'URL'

containment (string)

プレーヤーはデフォルトではbodyタグに埋め込まれます。
デフォルト　containment: 'body'

containment: 'body'

ratio (string or number)

動画の比率を指定する（"auto"、"16/9"、"4/3" または4/3、6/9）
デフォルト　ratio: 'auto'

ratio: 'auto'

fadeOnStartTime (int)

ビデオ開始時のフェードイン時間
デフォルト　fadeOnStartTime: 1000

fadeOnStartTime: 1000

startAt (int)

開始時間の指定
デフォルト　startAt: 0

startAt: 0

stopAt (int)

停止時間の指定
デフォルト　stopAt: 0（指定しない）

stopAt: 0

autoPlay (bool)

ページロード時にビデオを開始、または一時停止する
デフォルト　autoPlay: true

autoPlay: true

delayAtStart (bool)

YT APIがイベントを発生させない場合、プレイヤーは指定時間から動画をスタートします。つまり、ページを開いてから動画をスタートさせるまで遅延させます。
デフォルト　delayAtStart: 1000

delayAtStart: 1000

coverImage (string)

自動再生オプションがfalseに設定されている場合に、カバーとして使用される画像のパス指定をします。
デフォルト　coverImage: false

coverImage: 'URL'

loop (bool or int)

ビデオがループするかどうかを指定します。数字の場合、指定した時間だけループします。
デフォルト　loop: true

loop: true

addRaster (bool)

動画の上にビットマップ画像を表示します。（CSSで追加）ラスター画像はCSSで変更可能です。
例：　.YTPOverlay.raster { background: url(images/raster.png)}
デフォルト　addRaster: false

addRaster: false

mask (bool or object)

マスクをするために、2番目にキーを、その後にマスクのパスを指定します。
例：　mask:{ 0:'assets/mask-1.png', 5:'assets/mask-2.png', 30: false, 50:'assets/mask-3.png'}
mask: false

mask: false

opacity (int)

透明度を0から1で指定します。1で100%になります。
デフォルト　opacity: 1

opacity: 1

quality (string)

setPlaybackQualityはYT APIで非推奨となり、動作しなくなりました。
“small”, “medium”, “large”, “hd720”, “hd1080”, “highres”, "default"
quality: 'hd1080'

vol (int)

音量を0から1で指定します。1で100%になります。
デフォルト　vol: 50

vol: 50

mute (bool)

最初の再生時に音量を消音にします。
デフォルト　mute: false

mute: false

showControls (bool)

コンテナ下部にコントロールバーを表示します。
デフォルト　showControls: true

showControls: true

anchor (string)

center,top,bottom,left,rightは一組になる。
デフォルト　anchor: 'center,center'

anchor: 'center,center'

showAnnotations (bool)

動画にアノテーションを表示する
デフォルト　showAnnotations: false

showAnnotations: false

cc_load_policy (bool)

サブタイトルを表示する
デフォルト　cc_load_policy: false

cc_load_policy: false

showYTLogo (bool)

ボタンバーの中にYoutubeのロゴタイプを表示する
デフォルト　showYTLogo: true

showYTLogo: true

useOnMobile (bool)

モバイルでもプレイヤーを有効にする
デフォルト　useOnMobile: true

useOnMobile: true

playOnlyIfVisible (bool)

コンテナが画面上にある場合のみ、ビデオを再生する
デフォルト　playOnlyIfVisible: false

playOnlyIfVisible: false

onScreenPercentage (bool)

動画がしていされたサイズ以下（パーセンテージ）になった時に、動画を停止または開始することができます。
デフォルト　onScreenPercentage: 30

onScreenPercentage: 30

goFullScreenOnPlay (bool)

プレーヤの格納場所が "self" に設定されている場合、再生時にビデオをフルスクリーン化することができます。
デフォルト　goFullScreenOnPlay: false

goFullScreenOnPlay: false

stopMovieOnBlur (bool)

ウィンドウのフォーカスが外れた場合、ビデオを停止する
デフォルト　stopMovieOnBlur: true

stopMovieOnBlur: true

realfullscreen (bool)

フルスクリーンの場合、ビデオはすべてのディスプレイをカバーします。
デフォルト　realFullscreen: true

realFullscreen: true

optimizeDisplay (bool)

映像は常に黒帯を表示せずにコンテナにフィットさせる
デフォルト　optimizeDisplay: true

optimizeDisplay: true

abundance (bool)

動画サイズの拡張。デフォルトで動画サイズは拡大しています。上下左右がクリッピングされるのはこの為です。
デフォルト　abundance: 0.3

abundance: 0.3

gaTrack (bool)

GAで動画を再生するトラック
デフォルト　gaTrack: true

gaTrack: true

remember_last_time (bool)

ページが再読み込みされたとき、ビデオは最後の位置から開始されます。
デフォルト　remember_last_time: false

remember_last_time: false

addFilters (bool or string)

動画にCSS フィルタを 1 つまたは複数追加します
例：　{sepia: 50, hue_rotate : 220}
デフォルト　addFilters: false

addFilters: false

useNoCookie (bool)

https://www.youtube-nocookie.com ホストを使用して動画を配信する
デフォルト　useNoCookie: true

useNoCookie: true

onReady (function)

プレイヤーの準備が整ったら起動する関数です。
onReady: function (player) {
}

onReady: function (player) {
}

onReady (function)

エラーが発生したときに呼び出される関数です。
onError: function (player, err) {
}

onError: function (player, err) {
}

onEnd (function)

動画が終了したときに呼び出される関数です。
onEnd: function () {
}

onEnd: function () {
}

YTPlayer使用方法とプロパティ

サンプルコード

YTPlayer読み込みJavaScriptコードのみ

YTPlayerホームページ

YTPlayerプロパティ設定

videoURL (string)

containment (string)

ratio (string or number)

fadeOnStartTime (int)

startAt (int)

stopAt (int)

autoPlay (bool)

delayAtStart (bool)

coverImage (string)

loop (bool or int)

addRaster (bool)

mask (bool or object)

opacity (int)

quality (string)

vol (int)

mute (bool)

showControls (bool)

anchor (string)

showAnnotations (bool)

cc_load_policy (bool)

showYTLogo (bool)

useOnMobile (bool)

playOnlyIfVisible (bool)

onScreenPercentage (bool)

goFullScreenOnPlay (bool)

stopMovieOnBlur (bool)

realfullscreen (bool)

optimizeDisplay (bool)

abundance (bool)

gaTrack (bool)

remember_last_time (bool)

addFilters (bool or string)

useNoCookie (bool)

onReady (function)

onReady (function)

onEnd (function)

いいなと思ったら応援しよう！