ペンを見る
ホバーグラデーションルナスキン
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
プロパティ。
まだ行っていない場合は、
id
video
次のように要素に属性を追加します。
<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セレクタを示しています。コンポーネント自体の詳細については、「
コンポーネントの概要」
ドキュメントを参照してください。
プレイヤーのロードとホバー時
コンポーネントセレクターの概要
コンポーネント
{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 では動作しません。
