はじめに
レスポンシブサイズ設定とは、アスペクト比（縦横比）を維持しながら、ウィンドウサイズの変化に応じてプレーヤーをリサイズすることを指します。これにより、下図のようなレターボックス（黒い余白）が表示されないようにします。
ページに動画プレーヤーを埋め込んだ際、多くの場合ブラウザウィンドウをリサイズしてもプレーヤーはサイズを変えません。これはデフォルト設定でプレーヤーに固定の幅と高さが割り当てられており、ブラウザの変化に反応しないためです。レスポンシブ Web デザインの重要な要素の一つは、ページ内の要素が様々な画面サイズにスムーズに適応することです。
プレーヤー
ブラウザのサイズを変更すると、動画のアスペクト比を維持したままプレーヤーがリサイズされることを確認できます。動画の周囲にレターボックスが表示されることはありません。また、このページのコンテンツには最大幅が設定されています。
動作の仕組み
以下のセクションでは、プレーヤーと例で使用されている HTML コードについて説明します。
レスポンシブプレーヤーの作成
プレーヤーをレスポンシブにする HTML を手動で埋め込みコードへ追加することもできますが、最も簡単な方法は Studio の Players モジュールを使用することです。
レスポンシブプレーヤーを作成する手順は次のとおりです。
- Players モジュールで新しいプレーヤーを作成するか、既存のプレーヤーを選択し、プロパティ編集のためにプレーヤー名をクリックします。
- プレーヤー情報 セクションを探します。
- サイズ プロパティを 可変 に設定します。
レスポンシブサイズ設定 -
任意設定：プレーヤーの寸法 で 幅 プロパティを追加できます。プレーヤーがレスポンシブの場合、この値はプレーヤーの最大幅として扱われます。
- 保存 をクリックします。
- プレーヤーを公開するには、公開と埋め込み > 変更の公開 をクリックします。
- 開いているダイアログを閉じるには 閉じる をクリックします。
-
Media モジュールで動画を選択し、このプレーヤーを使って公開します。動画コンテンツをプレーヤーに割り当て、公開します。
Media モジュールでの公開 - iframe または Videoタグ埋め込みコードのいずれかをコピーし、新しい HTML ファイルに貼り付けます。
プレーヤー埋め込みコード
iframe 埋め込みコードを HTML ページにコピーすると、プレーヤーが 2 つの <div> コンテナでラップされていることに気づきます。コードは次のようになります。
- 1〜9 行目：動画公開時にコピーした埋め込みコードです。
- 1 行目：プレーヤーの最大幅を設定する外側のコンテナです。デフォルトは 100% に設定されています。Studio で幅を設定した場合、プレーヤーはその最大幅までレスポンシブに動作します。
- 2 行目：インストリンシック レシオ（intrinsic ratio）を使用して高さを設定し、正しいアスペクト比を維持する内側のコンテナです。詳細は インストリンシック レシオの理解 を参照してください。
- 3〜7 行目：iframe 実装のプレーヤーコードです。3 行目の
style属性により、プレーヤーが親コンテナいっぱいに表示されるよう位置が設定されます。これによりブラウザサイズに合わせてプレーヤーがリサイズされます。
<div style="position: relative; display: block; max-width: 960px;">
<div style="padding-top: 56.25%;">
<iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
allowfullscreen=""
allow="encrypted-media"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
</iframe>
</div>
</div>
iframe の例
iframe 埋め込みコードを HTML ページにコピーすると、コードは次のようになります。
<div style="position: relative; display: block; max-width: 960px;">
<div style="padding-top: 56.25%;">
<iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
allowfullscreen=""
allow="encrypted-media"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
</iframe>
</div>
</div>
Videoタグ 埋め込みの例
Videoタグ 埋め込みコードを HTML ページにコピーすると、コードは次のようになります。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Responsive Brightcove Player</title>
</head>
<body>
<div style="max-width: 960px;">
<video-js data-account="1752604059001"
data-player="default"
data-embed="default"
controls=""
data-video-id="5802784116001"
data-playlist-id=""
data-application-id=""
class="vjs-fluid"></video-js>
</div>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Responsive Brightcove Player</title>
</head>
<body>
<div style="position: relative; display: block; max-width: 640px;">
<div style="padding-top: 56.25%;">
<video-js
data-account="1752604059001"
data-player="VyqgG8mql"
data-embed="default"
data-application-id=""
controls=""
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></video-js>
<script src="https://players.brightcove.net/1752604059001/VyqgG8mql_default/index.min.js"></script>
</div>
</div>
</body>
</html>
インストリンシック レシオの理解
このソリューションではインストリンシック レシオ（intrinsic ratio）という、親要素に設定された比率に合わせて子要素のサイズを柔軟に調整する CSS テクニックを使用しています。これを行うために、動画プレーヤーを囲む <div> コンテナを追加し、その親要素に動画のアスペクト比に応じた padding-top プロパティを設定します。
インストリンシック レシオを成立させるカギは padding プロパティです。padding は親要素の幅に対するパーセンテージで指定されるため、この仕組みを利用して縦横比を維持できます。この方法は主要なブラウザで幅広くサポートされているため、非常に有効です。
アスペクト比はパーセンテージの計算で求められます。たとえば 16:9 の動画の場合、高さ ÷ 幅 = 9 ÷ 16 = 0.5625、つまり 56.25% になります。16:9 の動画では、高さは幅の 9/16 である必要があります。
aspect-ratio プロパティの使用
このソリューションでは、CSS の aspect-ratio プロパティを使用しています。これは自動サイズ計算やレイアウト調整時に優先されるアスペクト比を指定するプロパティです。
アスペクト比を算出するために、動画の幅と高さを確認します。これらの値は Media モジュール内の動画ファイル セクションの「寸法（dimensions）」に記載されています。
この方法では、<div> 内の style 属性に aspect-ratio を追加し、動画の幅と高さの値を割って比率を設定します。
<div style="position: relative; display: block; max-width: 100%;">
<div style="aspect-ratio: 480/270;">
<iframe src="https://players.brightcove.net/1752604059001/default_default/index.html?videoId=5802784116001"
allowfullscreen=""
allow="encrypted-media"
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
</iframe>
</div>
</div>
Videoタグ埋め込みコードの場合、コードは次のようになります。
<div style="max-width: 960px; aspect-ratio: 480/270 !important;">
<video-js data-account="1752604059001"
data-player="default"
data-embed="default"
controls=""
data-video-id="4093643993001"
data-playlist-id=""
data-application-id=""
class="vjs-fluid"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</div>
fluid モードの使用
Video.js ライブラリ v5.0.0 以降では、シンプルなレスポンシブ クラスがサポートされています。これらのクラスは、Videoタグ埋め込みコードを使用した場合、Brightcove Player でも利用できます。
レスポンシブ クラスには次のものがあります：
| クラス | デフォルト | アスペクト比 |
|---|---|---|
vjs-fluid |
Yes | 2.4:1 |
vjs-16-9 |
No | 16:9 |
vjs-4-3 |
No | 4:3 |
上記の fluid クラスを使用すると、プレーヤーがレスポンシブにサイズ調整されます。これらのクラスは、video 要素に padding-top 属性を適用することで実現されています。
ブラウザ全体に広がるレスポンシブ プレーヤーを作成するには、埋め込みコードにいずれかの fluid クラスを追加します。たとえば、16:9 のアスペクト比を使用する場合、コードは次のようになります：
<video-js data-video-id="5802784116001"
data-account="1752604059001"
data-player="default"
data-embed="default"
data-application-id
class="video-js vjs-16-9"
controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
プレーヤーに最大サイズを設定したい場合は、単純に埋め込みコードを div コンテナで囲み、max-width または max-height を指定します。次の例では、プレーヤーの最大幅を 640px に制限しています：
<div style="max-width: 640px;">
<video-js data-video-id="5802784116001"
data-account="1752604059001"
data-player="default"
data-embed="default"
data-application-id=""
class="video-js vjs-16-9"
controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
</div>