プレーヤーのサイズ設定
サイズ設定の考慮事項
動画およびプレーヤーのサイズ設定において重要な概念が 2 つあります。
-
アスペクト比 – プレーヤー作成時に curl ステートメントで設定するメディアの幅と高さのプロパティが、動画の持つ本来の寸法（アスペクト比）を定義します。
- プレーヤーサイズ – CSS や HTML コードで設定するプレーヤーの幅と高さのプロパティにより、プレーヤーのサイズが決まります。プレーヤーのサイズを変更すると、本来の動画寸法をもとにコントロールの位置が適切に保たれます。
アスペクト比の設定
動画のアスペクト比とは、幅と高さの比率のことです。従来のテレビは 4:3、ワイドスクリーンは 16:9 のアスペクト比を使用します。
プレーヤーを作成する際、Studio を使って動画の幅と高さを指定できます。Players モジュールの プレーヤー情報 セクションを使用します。
動画のアスペクト比は一定のままで、プレーヤーがレスポンシブにサイズ変更されてもコントロールは適切に配置されます。
誤ったアスペクト比を使用する場合
動画の寸法と異なるメディアのアスペクト比を指定すると、動画の周りにレターボックスが表示され、プレーヤーのコントロールも動画上に正しく配置されません。
ここでは、メディアの幅と高さをそれぞれ 640px と 480px（4:3 のアスペクト比）に設定していますが、使用している Tiger 動画は 16:9 のアスペクト比です。
正しいアスペクト比を使用する場合
メディアの寸法が動画のアスペクト比と一致している場合、レターボックスは表示されず、プレーヤーのコントロールもサイズ変更時に正しく配置されます。
ここでは、メディアの幅と高さをそれぞれ 640px と 360px（16:9 のアスペクト比）に設定しており、Tiger 動画と同じ比率となっています。
プレーヤーサイズの設定
プレーヤーのサイズは Studio を使用して設定できます。Players モジュールの プレーヤー情報 セクションを使用します。
以下のセクションで説明するように、CSS を使用してプレーヤーのサイズを設定することもできます。
iframe を使用する
iframe 実装では、iframe 要素に width 属性と height 属性を指定することでプレーヤーのサイズを設定できます。設定方法はいくつかあります。
-
iframe要素に属性を追加する -
iframe要素に CSS を適用する -
id属性を使用して CSS を適用する
iframe 要素に属性を追加する
iframe 要素に width と height 属性を追加して設定します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Size the Player</title>
</head>
<body>
<iframe src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.html?videoId=6116766236001"
allowfullscreen=""
allow="encrypted-media"
width="960" height="540"></iframe>
</body>
</html>
iframe 要素に CSS を適用する
CSS 内で、iframe 要素に対して width と height を設定します。
<!-- Page styles -->
<style>
iframe {
width: 640px;
height: 360px;
}
</style>
id 属性を使用して CSS を適用する
CSS 内で iframe 要素に追加した id を参照します。この方法は、ページに複数の iframe 要素が存在する場合に便利です。
<!-- Page styles -->
<style>
#myPlayer {
width: 640px;
height: 360px;
}
</style>
...
<iframe id="myPlayer" ...
Videoタグ（インページ埋め込み）を使用する
Videoタグ（インページ埋め込み）実装では、video 要素に width 属性と height 属性を指定することでプレーヤーサイズを設定できます。これを行う方法はいくつかあります。
video要素に属性を追加する- class 属性を使用して CSS を適用する
id属性を使用して CSS を適用する
video 要素に属性を追加する
video 要素に width と height 属性を追加し、値を設定します。
<video-js data-account="1507807800001"
data-player="rf1BTdKk6M"
data-embed="default"
controls=""
data-video-id="6116766236001"
data-playlist-id=""
data-application-id=""
width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>
class 属性を使用して CSS を適用する
video 要素には class 属性があり、CSS から参照してプレーヤーサイズを設定できます。
<!-- Page styles -->
<style>
.video-js {
width: 640px;
height: 360px;
}
</style>
id 属性を使用して CSS を適用する
CSS 内で、video 要素に追加した id を参照します。この方法は、ページに複数の video 要素がある場合に便利です。
<!-- Page styles -->
<style>
#video_1 {
width: 640px;
height: 360px;
}
</style>
...
<video-js id="video_1" ...
パーセンテージの使用
Brightcove Player の iframe または video タグで height や width 属性を使用する場合、これらの属性はピクセルのみで測定されます。実際、height および width 属性には単位を入力しません（px を付けることはできますが、技術的には正しい HTML 仕様ではありません）。
width="480"
パーセンテージを使用することも可能で、これは CSS を使って次の 2 通りの方法で実現できます。
videoタグ内でstyle属性を使用する方法。<video-js data-video-id="5622718636001" data-account="1507807800001" data-player="default" data-embed="default" data-application-id controls="" style="width: 100%;height: 100%"></video-js> <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>styleタグを使用する方法。... <style> .video-js { height: 100%; width: 100%; } </style> ... <video-js data-account="1752604059001" data-player="H1xW7NWcz" data-embed="default" data-application-id controls=""></video-js> <script src="https://players.brightcove.net/1752604059001/H1xW7NWcz_default/index.min.js"></script>
フルスクリーン表示
最新のブラウザで fullscreen API をサポートしている場合、プレーヤーがフルスクリーンに切り替わった際に 100% にスケールされるよう、ページ内の CSS ルールを適用する必要があります。これを行わないと、フルスクリーン表示でもプレーヤーが元のサイズのまま表示されてしまいます。
フルスクリーンモードでプレーヤーが適切にスケールされるよう、以下の CSS を使用します。
/***************************
* Fullscreen display *
***************************/
body.vjs-full-window {
padding: 0;
margin: 0;
height: 100%;
}
.video-js.vjs-fullscreen {
position: fixed;
overflow: hidden;
z-index: 1000;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
.video-js:-webkit-full-screen {
width: 100% !important;
height: 100% !important;
}
.video-js.vjs-fullscreen.vjs-user-inactive {
cursor: none;
}
優先順位の順序
プレーヤーのサイズを設定する方法はいくつかあります。以下は、その優先順位の一覧です。
- 実行時の変更（JavaScript を使用してプレーヤーサイズを変更）
- <video-js> タグで設定されたサイズ
- CSS（通常の継承ルールに従う）
- プレーヤー設定（Player configuration settings）
Player API におけるサイズ
Player API には、ピクセル単位でサイズを返す 4 つのメソッドがありますが、それぞれの違いを理解することが重要です。
.height()-videoタグのheight属性で設定された高さを返します（属性が設定されていない場合、height()は 0 を返します）。.width()-videoタグのwidth属性で設定された幅を返します（属性が設定されていない場合、width()は 0 を返します）。.currentHeight()- 設定方法に関係なく、プレーヤーの現在の高さを返します。.currentWidth()- 設定方法に関係なく、プレーヤーの現在の幅を返します。
多くの場合、使用すべきメソッドは currentHeight() と currentWidth() です。