プレーヤーの外観のカスタマイズ

独自のスキンを作成する

デフォルトのスキンを使用せず、独自のスキンを作成したい場合は、Player Management API を使用して可能です。Player設定ガイドには、必要な情報が記載されています。

プレイヤー

プレイヤーの見た目を変更することはできますが、まずそれに対処する方法が必要です。これを確認するには、詳細（ページ内埋め込み）コードが挿入されたHTMLページを参照します。の中に要素開発ツールのセクションで、<video-js>タグを付けると、値を持つクラスがあることがわかりますvideo-jsとりわけ、割り当てられました。

これを知ったら、スタイルを使ってプレイヤー自体を変更することができます。たとえば、プレーヤーの周りに境界線を含めるには、次のスタイルを使用できます。

<style>
  .video-js {
    border-style: double;
    border-width: thick;
    border-color: red;
  }
</style>

iframeプレイヤー

プレーヤーの標準 (iframe) 実装を使用している場合、状況は異なります。video-jsクラスのプレーヤーが引き続き表示されますが、当然、iframe内およびvideo-jsタグ内にあります。

作成したスタイルは iframe のプレーヤーで引き続き動作しますが、CSS ファイルを作成し、Studio を使用してプレーヤーに関連付ける必要があります。これを行うには、プレーヤーモジュールに移動し、CSSを関連付けるプレーヤーをクリックし、プラグイン>スタイルシートセクションで、あなたのCSSファイルのパスを追加します。

iframe自体をカスタマイズしたい場合は、要素セレクタを使用してこれを行うことができます。次に、<style>タグを使用して必要に応じて変更します。下の例では、プレーヤーの周りに境界線が追加されます。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      border-style: double;
      border-width: thick;
      border-color: red;
    }
  </style>
</head>

<body>

<iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001"
  allowfullscreen=""
  allow="encrypted-media"
  width="640" height="360"></iframe>

</body>

</html>

[再生] ボタン

再生ボタンの外観を変更したい場合は、まずそのボタンの対処方法を知る必要があります。Chromeでは、ボタン上で右クリックします。表示される選択項目から、[ 検査] を選択します。[ 検査] を選択すると、Chrome の開発ツールが開きます。

開発ツールの「要素」セクションには、ボタン要素に対応する HTML コードが表示されます。

上記の強調表示されたコードから、ボタンに割り当てられたクラスがであることがわかりますvjs-big-play-button。再生ボタンの色（虎にマッチする）と不透明度は、次のスタイルによって変更されます。

.vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

このアプローチはうまくいくと思うでしょうが、そうではありません。CSS を操作するときは、プロパティの特異性を認識する必要があります。これは、ブラウザが要素に適用するプロパティ値を関連性に基づいて決定する方法を指します。

ボタンの変更を適用する 1 つの方法は、セレクターに別のクラスを追加することです。たとえば、.video-jsクラスを使用して、セレクターの特異度を高めることができます。詳細については、 CSS の特異性のセクションを参照してください

次に、CSS でプレイヤーの Big Play ボタンを次のように参照します。

.video-js .vjs-big-play-button {
  background-color: #B37D5B;
  opacity: .6;
}

ボタンをダークグレーからオレンジに変更した結果は次のとおりです。

再生ボタンを隠す

次のスタイルを使用すると、再生ボタンを完全に非表示にすることができます。

display: none;

実験

次の CodePen では、再生ボタンを試すことができます。再生ボタンの三角形は実際にはフォントであり、font-sizeそのサイズはスタイルでコントロールされます。

ペンを見る5.xビッグプレイボタンのカスタマイズ Matt Boles（ @mboles）オンCodePen。

ホバーテキストの変更

大きな再生ボタンにカーソルを合わせたときに表示されるテキストを変更したい場合は、動画を再生します デフォルトでは、動画に固有の何かに対して、それを行うことができます。controlTextメソッドの引数として、希望する言語を使用して、次の JavaScript を追加します。

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.getChild('bigPlayButton').controlText('Play Audio');
});

可視性をコントロール

あなたは、コントロールバーとその中に含まれるコントロール、表示または非表示にするかどうかを制御することができます。プレーヤー作成開始からコントロールバーを非表示にしたい場合は、このスタイルを使用できます。

.video-js .vjs-control-bar {
  display: none;
}

あなたがいくつかのイベントに基づいて動的にこれを実行したい場合は、controlBar.hide()/show()メソッドを使用することができます。以下のコードスニペットは、メソッドの使用を示しています（これは、idmyPlayerビデオにの値を持つを持つことを前提としています）。

<video-js id="myPlayerID"
	data-video-id="5781068653001"
	data-account="1507807800001"
	data-player="default"
	data-embed="default"
	data-application-id
	class="video-js"
	controls></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

<p><button onclick="hideBtn()">hide controls</button></p>
<p><button onclick="showBtn()">show controls</button></p>

<script>
  var myPlayer;
	videojs.getPlayer('myPlayerID').ready(function() {
		myPlayer = this;
	});

	function hideBtn() {
		myPlayer.controlBar.hide();
	}

	function showBtn() {
		myPlayer.controlBar.show();
	}
</script>

コントロールは決して隠さない

また、コントロールが隠れないようにすることもできます。これを行うには、transform.noneスタイルを使用します。変換の特異性に 6 つのクラスが使用されているので、セレクターは非常に長くなります。

.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.vjs-has-started.vjs-paused.vjs-ad-playing.vjs-user-inactive .vjs-control-bar,
.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible){
  transform: none;
  -webkit-transform: none;
  -ms-transform: none;
}

ちょっとしたハックと考えられますが、コントロールバーのクラスを8回繰り返して、上記のセレクタと一致するようにその特異性を構築することができます。

.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar {
  transform: none;
  -webkit-transform: none;
  -ms-transform: none;
}

プログレスバー

今、あなたは進行状況インジケータの色を変更する方法について説明します。次に示すように、インジケーターのデフォルトの色はフクシアです。

ここでの課題は、要素のクラス名を見つけることです。ドキュメントで前述したのと同じ方法を使用して、要素を右クリックして「検査」を選択し、ドリルダウンすると、vjs-play-progressクラス。

background-color要素の色を変更し、スタイルを設定する必要があります。必要なスタイルがここに示されています。

.video-js .vjs-play-progress {
  background-color: green;
}

.video-jsクラスがセレクターに追加されていることに注目してください。これは、セレクターの CSS の特異性を高めるために行われます。

結果は次のように表示され、緑色のプログレスバーが表示されます。

ボリュームコントロール

CSS を使用するか、optionsプレーヤーの作成時にオブジェクトを渡すことによって、ボリュームコントロールをカスタマイズできます。

CSSを使用して更新する

次に、ボリュームコントロールの色を変更する方法について説明します。デフォルトの外観を次に示します。フクシアの音量レベルバーが付いた白い音量ボタンです。

音量ボタンとクリックしたときのミュートボタンの色を変更するには、次のセレクターを使用します。

.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal {
  color: yellow;
}

ボリュームバーの色を変更するには、background-color要素のスタイルを設定する必要があります。必要なスタイルがここに表示されます。

.video-js .vjs-volume-level{
  background-color: yellow;
}

.video-jsクラスがセレクタに追加されたことに注目してください。これは、セレクタのCSSの特異性を高めるために行われます。

ボタンとボリュームバーのスタイル設定の結果を次に示します。

optionオブジェクトを使用して更新

ボリュームコントロールのレイアウトを変更するには、optionsオブジェクトにbc（）メソッド次のように：

videoタグから次の属性を削除して、プレイヤーの作成を遅らせます。
- data-account
- data-player
- data-video-id
を定義するoptionsオブジェクトがvolumePanel垂直であり、コントロールバーとインラインではありません。
```
var options = {
  controlBar: {
    volumePanel: {
      inline: false,
      vertical: true
    }
  }
};
```
最初に削除したプレイヤー属性を追加します。
を呼び出してプレーヤーを作成しますbc（）メソッドとともにoptionsオブジェクト。
```
bc("myPlayerID", options);
```
詳細については、垂直ボリュームコントロールプレーヤーのサンプルを参照して下さい。

フォント

タイトルと説明は、プレーヤーが最初にロードされたとき、およびユーザーがプレーヤーの上に置いたときに表示されます。タイトルと説明のフォントのスタイルは、一緒に、または別々に変更できます。次のスクリーンショットに示すように、ドック用のHTMLが表示されます。あることに注意してください<div>クラスがvjs-dock-text他に2つ含まれています<div>を含む要素題名と説明。

vjs-dock-textクラスにスタイルを設定することで、タイトルと説明の両方に影響を与えることができます。.vjs-dock-title.vjs-dock-descriptionとに設定されているスタイルは、もちろん、上位レベルで設定されたスタイルによって完全に上書きされるわけではありません。次のスタイルおよびテキストでの結果が示すように、一部のスタイルは継承されます。

.video-js .vjs-dock-text {
  color: yellow;
  font-size: .7em;
}

個々のタイトルと説明を直接スタイル設定できます。次に、.vjs-dock-title.vjs-dock-descriptionおよびクラスセレクターに設定されているスタイルと、結果のテキストにスタイルが表示されます。

.video-js .vjs-dock-title {
  color: red;
  font-size: 1.5em;
}
.video-js .vjs-dock-description {
  color: yellow;
  font-size: 1.0em;
}

コントロールバーアイコンの操作

<div><div>親コントロールバーのHTMLの順序によって決定されるコントロールバーのアイコンの順序です。ここに、全ての子を含むコントロールバー<div>を示します。

一般的に、これはコントロールバーのアイコンに配置するときに取るべきアプローチになります。

コントロールバーに挿入する要素を動的に構築します。
コントロールバー要素への参照を取得します。
コントロールバーの前に新しい要素を挿入したい要素への参照を取得します。
JavaScriptのinsertBefore()メソッドを使用してアイコンを配置する方法。

insertBefore()はの構文は次の通りです：

parent.insertBefore(newElement,insertBeforeElement)

これは、以下の詳細なコードで、新しいコントロールバー（親）への参照を取得するJavaScript、コントロールバーに挿入するアイコンを含む新しい<div>、最後に新しいアイコンが挿入される要素への参照が表示されます。

具体的には、次のコードを使用して、ボリュームアイコンの前にダウンロードビデオアイコンを挿入します。

280-285行目:ダウンロードボタンのスタイル。
291～295行目:変数を割り当てて、次のHTML要素を作成します。
- <div>には、ダウンロードアイコンのアイコンが含まれます。
- アイコンをクリック可能にするアンカータグ。
- アイコンイメージ自体。
297-2980 行線:新しい要素に割り当てて、ID と CSS クラスを割り当てます。
300行目線:画像にソースを割り当てます。
301号線:hrefをリンクに割り当てます。
302号線:リンクに画像を追加します。
303行目:動的に作成されたにリンクを追加します<div>。
306行目:使用するコントロールバーへの参照を取得しますinsertBefore()。
308行目:新しいアイコンの前に挿入される要素への参照を取得し、insertBefore()で使用します。
310号線:動的に作成された要素を挿入します。

<!-- styles for page -->
  /* Style the download icon */
  #downloadButton {
      width: 34px;
      height: 33px;
      margin-top: 6px;
  }
</style>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    // Create variables and new div, anchor and image for download icon
    var myPlayer = this,
      controlBar,
      newElement = document.createElement('div'),
      newLink = document.createElement('a'),
      newImage = document.createElement('img');
    // Assign id and classes to div for icon
    newElement.id = 'downloadButton';
    newElement.className = 'downloadStyle vjs-control';
    // Assign properties to elements and assign to parents
    newImage.setAttribute('src','http://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png');
    newLink.setAttribute('href','http://www.brightcove.com');
    newLink.appendChild(newImage);
    newElement.appendChild(newLink);
    // Get controlbar and insert before elements
    // Remember that getElementsByClassName() returns an array
    controlBar = document.getElementsByClassName('vjs-control-bar')[0];
    // Change the class name here to move the icon in the controlBar
    insertBeforeNode = document.getElementsByClassName('vjs-volume-menu-button')[0];
    // Insert the icon div in proper location
    controlBar.insertBefore(newElement,insertBeforeNode);
  });

ここに、新しく挿入されたアイコンが黄色で強調表示されたコードの結果が表示されます。

アイコンを別の場所に配置したい場合は、要素を前に挿入するコードを変更するだけで済みます。たとえば、フルスクリーンボタンの前に新しいアイコンを移動するには、次のようにします。

insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];

結果は次のようになります。

右端のアイコン

コントロールバーの右端にアイコンを表示したい場合は、insertBefore()とともにappendChild()ここに示すように、メソッド：

controlBar.appendChild(newElement);

Brightcove Player サンプルには、アイコンを追加した例（この場合はファイルのダウンロード用）が示されています。ビデオプラグインのドキュメントをダウンロードします。

スペーサーを使用する

上記のテクニックはコントロールバーにアイコンを配置するために機能しますが、コントロールバーを操作する他のコードと互換性がない可能性があります。また、一般的な再利用のために、コードをプラグインに抽象化したくない可能性が最も高いでしょう。

前の段落の弱点は、特にアイコンを追加するために、コントロールバーに挿入された特別なスペーサー要素を使用することによって克服することができます。スペーサの欠点は、アイコンを配置できる場所を完全に制御できないことです。ただし、このセクションの前半で説明したテクニックを使用します。

次のスクリーンショット (緑色の楕円で強調表示) に示すように、スペーサ要素は、左側の時間情報と右側のフルスクリーンアイコンの間のコントロールバーにあります。要素開発ツールの要素では、要素がHTML<div>で定義されていること注意してください。

スペーサー要素にアイコンを配置するには、次のコードを使用します。これは、このセクションで前述したコードと非常によく似ています。コードの結果は、コードスニペットの後に続くスクリーンショットに表示されます。

// Get the spacer element
spacer = document.getElementsByClassName('vjs-spacer')[0];
// Place the new element in the spacer
spacer.appendChild(newElement);

スペーサーの右側にアイコンを配置する場合は、別のコード行を使用する必要があります。スペーサーのレイアウトは、HTML フレックスボックスによって制御されます。だから、フレックスボックススタイルを追加すると、追加したアイコンを右に押すことができます。コードの結果は、コードスニペットの次のスクリーンショットに表示されます。

// Set the content of the spacer to be right justified
spacer.setAttribute("style", "justify-content: flex-end;");

/playback/ios-and-brightcove-player.html/playback/ios-and-brightcove-player.html

全画面表示ボタンを削除

iOS で動画の全画面表示を許可すると、問題が発生する可能性があります。詳細については、 iOS および Brightcove Player のドキュメントを参照してください。コントロールバーからフルスクリーンボタンを削除したい場合は、このコードを使うことができます：

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      fullScreenElement = document.getElementsByClassName("vjs-fullscreen-control")[0];
    if (videojs.browser.IS_IOS ) {
      fullScreenElement.parentNode.removeChild(fullScreenElement);
    }
  });
</script>

ボタンが iOS ifデバイスでのみ削除されるようにステートメントを書き留めます。

コントロールバーのアイコン「グロー」

コントロールバーのアイコンのテキストシャドウ (「グロー」とも呼ばれます) を変更できます。たとえば、色を変更したり、グローを大きくして、アイコンにフォーカスを移すことができます。次のスクリーンショットは、テキストの影を赤で示しています。

表示される影響は、CSS text-shadow を変更することによって行われます。セレクタは、アイコンにフォーカスまたはホバー状態がある場合にのみ変更が行われると判断します。

.video-js .vjs-control:hover:before, .video-js .vjs-control:focus:before {
  text-shadow: 0 0 1em #f00,0 0 1em #f00,0 0 1em #f00;
}

text-shadowかなり複雑なスタイルの詳細については、MDN のテキストシャドウドキュメントを参照してください。

ホバーグラデー

プレーヤーが最初にロードされ、プレーヤーの上にマウスを置くと、ビデオタイトルが表示され、プレーヤーの上部に黒から透明なグラデーションが表示されます。このセクションでは、グラデーションを変更する方法を説明します。

実際のグラデーションは、linear-gradientvjs-dock-text HTMLのCSS関数によって制御されます<div>.グラデーションのサイズは、vjs-dock-text HTML の高さによって制御できます<div>。プレイヤーからのその要素とその子は次のとおりです。

<div class="vjs-dock-text">
  <h1 class="vjs-dock-title">Tiger</h1>
  <h2 class="vjs-dock-description"></h2>
</div>

次の図に示すように、グラデーションの既定値では、rgba() (赤-緑-青-アルファ) 関数を使用します。

linear-gradient(180deg,rgba(0,0,0,.8) 25%,transparent 100%);

これらの値により、グラディエントは黒から水平にフェードし、アルファは 0.8 で透明になります。 25% の値はカットオフ値です。つまり、rgbaこの関数で設定された値は、透明へのフェーディングが開始される前に、スペースの最初の 25% に使用されます。

操作上の目的で、このグラデーションをプロダクションで使用しないので、次のスタイルではスクリーンショットにグラデーションが作成されます。

.video-js .vjs-dock-text {
  background: linear-gradient(45deg, rgba(0,0,255,.8) 35%, transparent);
  height: 80%;
}

この例では、0.8アルファの青いグラデーションが45度の下り坂の角度で適用されます。線形グラデーションで設定されたカラー/アルファは、グラデーションの最初の 35% に使用され、フェードが開始されます。また、要素の高さの 80% が使用されます。

次の CodePen を使用すると、値を試すことができます。ビデオを起動し、マウスをインまたはアウトして、デフォルトで使用される微妙なグラデーションを確認します。

ペンを見るホバーグラデーションルナスキン Brightcove Learning Services（ @bcls）オンCodePen。

キャプションリスト項目

キャプションメニューのリストアイテムのスタイルを設定/制御する場合は、セレクターを次に示します。

セレクターを使用して、すべてのアイテムのスタイルを設定できます。

.vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item.

CSSの特異性

CSS の特異性とは、ブラウザが関連性に基づいて要素に適用されるプロパティ値を決定する方法を指します。この概念の詳細については、「特異性」の記事を参照してください。

Chrome で、大きな再生ボタンを調べます。backgroundプロパティは複数のクラスを使用して設定されていることに注意してください。つまり、このプロパティをオーバーライドするために 1 .vjs-big-play-buttonつのクラスだけを使用することはできません。

ビッグプレイボタンをカスタマイズするには、次の 3 つの方法を示します。

プレイヤーに割り当てられた ID を参照します。
複数のクラスを使用して、プロパティの関連性を高めます。
JavaScript を使用してプレーヤーの id 属性を設定し、CSS で参照します。

ID を参照する

id属性は CSS の特異性に関して高い関連性を持つため、CSS idセレクタに a を追加すると、background-colorプロパティ。

まだ行っていない場合は、idvideo次のように要素に属性を追加します。

<video-js id="video_1"
  data-account="1752604059001"
  data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
  data-embed="default"
  class="video-js" controls></video-js>

CSS で、.vjs-big-play-buttonクラスセレクターに id 値を追加します。背景色と不透明度を次のようにオーバーライドします。

<style>
  #video_1 .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
</style>

大きな再生ボタンがオレンジ色になっているはずです。

複数のクラスの使用

background大きな再生ボタンのプロパティは、2つのクラスを使用して設定されているため、このプロパティをオーバーライドするには、CSSセレクタに少なくとも2つのクラスが必要になります。

.video-js.vjs-big-play-buttonクラスをクラスセレクターに追加します。.video-jsクラスはビデオコンテナに設定されていることに注意してください。

これらの値で、vjs-big-play-button.video-js我々はのクラス名を持つ要素のdecedentsであるクラス名を持つすべての要素を選択と言っています。

<style>
  .video-js .vjs-big-play-button {
    background-color: #B37D5B;
    opacity: .6;
  }
  .video-js {
    width: 640px;
    height: 360px;
  }
</style>

大きな再生ボタンがオレンジ色になったことがわかります。複数のクラスを扱うのは難しいことがあり、複数の要素に影響を与える可能性がありますが、id は 1 つの要素に固有です。

JavaScriptを使う

JavaScript を使用して、大きな再生ボタンに ID を動的に追加することもできます。そのIDをCSSから参照できます。

ビッグプレイボタン要素に ID を追加するコードを追加します。

173行目:クラスを持つ最初の要素への参照を取得しますvjs-big-play-button。
174行目:idビッグプレイボタンに属性を追加します。

  <script type="text/JavaScript">

    var playButton = document.getElementsByClassName("vjs-big-play-button")[0];
    playButton.setAttribute("id", "myPlayButton");

  </script>

CSS で、myPlayButton ID 名を使用するようにセレクタを変更します。

<style>
    #myPlayButton {
      background-color: #B37D5B;
      opacity: .6;
    }
    .video-js {
      width: 640px;
      height: 360px;
    }
  </style>

大きな再生ボタンがオレンジ色になったことがわかります。

コンポーネントセレクタ

これらのスクリーンショットと次の表は、コンポーネントとそのコンポーネントを操作するために必要なCSSセレクタを示しています。コンポーネント自体の詳細については、「コンポーネントの概要」ドキュメントを参照してください。

プレイヤーのロードとホバー時

再生中

コンポーネントセレクターの概要

コンポーネント	セレクタ
BigPlayButton	`.video-js.vjs-mouse .vjs-big-play-button`
コントロールバー	`.video-js .vjs-control-bar` ( コントロールバーのアイコンによって継承されますが、プログレスコントロールではありません)
プレイトグル	`.video-js .vjs-play-control`
ミュートトグル	`.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal`
VolumeBar	`.vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-horizontal`
VolumeLevel	`.video-js .vjs-volume-level`
CurrentTime Display	`.video-js .vjs-current-time`
timedivider	`.video-js .vjs-time-divider`
durationDisplay	`.video-js .vjs-duration`
SeekBar	`.video-js .vjs-progress-control.vjs-control`
loadProgressBar	`.video-js .vjs-load-progress`
PlayProgressBar	`.video-js .vjs-play-progress.vjs-slider-bar`
AudioTrack	`.video-js .vjs-control-bar .vjs-audio-button`
ChaptersButton	`.video-js .vjs-chapters-button.vjs-menu-button`
CaptionsButton	`.video-js .vjs-captions-button.vjs-menu-button`
fullScreenT	`.video-js .vjs-fullscreen-control.vjs-control`
dockText	`.vjs-dock-text` ( dockTitle と dockDescription の両方に継承)
dockTitle	`.vjs-dock-title`
dockDescription	`.vjs-dock-description`

お探しのセレクターがテーブルにない場合は、ナレッジチームにメールでお知らせください。テーブルを追加いたします。

{PLAYER_CLASS}

{PLAYER_CLASS}はセレクターであり、プレーヤーの実際のクラス固有のセレクターに置き換えられます。次に例を示します。

.bc-player-oH9IdGudo_default

{PLAYER_CLASS}は、各プレーヤーのCSSを個別に作成したり、次のようなものを使用することなく、組み込みのスタイルを上書きするのに十分にあなたのCSSを具体化するのに役立ちます：

.video-js.video-js

たとえば、ロードスピナーをオーバーライドしたいとします。

.video-js.video-js .vjs-loading-spinner {...}

これは、デフォルトを上書きするのに十分固有ですが、ページに2番目のプレーヤーがある場合です。以下を使用しても、ページ内の他のプレイヤーには影響しません。

.video-js{PLAYER_CLASS} .vjs-loading-spinner {...}

{PLAYER_CLASS}セレクターは、プレーヤー設定スタイルシート配列 (たとえば、Studio または Player Management API を介して) に追加され、プレーヤーに直接組み込まれた CSS ファイルでのみ使用できます。このセレクターは、<style></style><link></link>タグまたはタグを介して別途含まれる高度な実装コード CSS では動作しません。