YTPlayer使用方法とプロパティ

littlebuddha

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 () {
}


この記事が気に入ったらサポートをしてみませんか？