ステップ・バイ・ステップ：プレーヤーカスタマイズ

このトピックでは、手順に沿って Brightcove プレーヤーの外観をカスタマイズする方法について説明します。Brightcove プレーヤーの外観をカスタマイズするには、Cascading Style Sheets（CSS）を使用する必要があります。このドキュメントでは、動画の上に最初に表示される再生ボタンの外観と位置を変更する手順を説明します。

概要

このドキュメントはいくつかのセクションに分かれており、プレーヤーの Video タグ埋め込みコードと iframe 実装で CSS を使用する方法の違いを説明します。

このドキュメントでは Chrome の開発ツールを使用しますが、すべての最新ブラウザーには同等の機能があります。さまざまなブラウザーでの開発ツールの簡単な紹介については、デバッグの基本ドキュメントを参照してください。

プレーヤーセレクターを特定する

CSS セレクターは、ページ上の HTML 要素を選択して操作するために使用します。CSS セレクターは、id、class、type、属性などに基づいて HTML 要素を「見つける（または選択する）」ために使用されます。HTML ページ上の要素の見た目を変更しようとする場合、まずその要素を指定するために使用するセレクターを特定する必要があります。以下の手順では、プレーヤーのセレクターを見つけ、そのサイズを変更する方法を示します。

Video Cloud Studio で Media モジュールを開き、公開する動画を選択します。
Embed to Web をクリックし、動画を再生するプレーヤーを選択します。Brightcove Default Player で問題ありません。
Player Sizing、Aspect ratio、およびプレーヤー寸法を設定します。
JavaScript タブをクリックし、埋め込みコードをコピーします。
HTML エディターを使用して新しい HTML ページを作成します。
HTML ページの body に公開コードを貼り付けます。
新しく作成したページをブラウザーで開きます。
ブラウザーの開発ツールを開き、HTML コードを確認して <video-js> タグを探します。このタグには video-js というクラスが付与されていることがわかります。<video-js> タグには常に video-js クラスが含まれています。プレーヤーのスタイルを設定する際には、この video-js クラスを頻繁に使用します。
以下のスクリーンショットで、赤でハイライトされているのがクラス名、緑でハイライトされているのが <video-js> タグ（つまり Brightcove プレーヤー）です。

再生ボタンのセレクター

次に、再生ボタンのセレクターを見つける別の方法を使用します。以下の手順では、再生ボタンに適したセレクターを見つけ、その外観を変更する方法を説明します。

HTML ページをブラウズします。
プレーヤー上に表示されている再生ボタンを右クリックします（最初の右クリックで Brightcove プレーヤー情報が表示されるため、2 回クリックする必要があります）。Inspect を選択します。
ハイライトされている <div> タグが再生ボタンを表しており、vjs-big-play-button というクラスを持っていることがわかります。

セレクター名がわかっている場合は、要素検索を使って探すこともできます。以下の動画でその方法を確認できます。
スタイルを変更し、再生ボタンの色と不透明度を変更する CSS を追加します。
```
  <style>
    .vjs-big-play-button {
      background-color: red;
      opacity: .3;
    }
  </style>
```
ページを表示すると、すべてのスタイルが反映されていないことに気づきます。ボタンが赤くなっていません。
開発ツールの右側にあるスタイルサマリーを確認すると、背景色を赤に変更するスタイルが打ち消されて（取り消し線が付いて）いることがわかります。

注：Safari ではスタイルが打ち消されていても、取り消し線が表示されない場合があります。

これは、背景色を変更する複数のスタイルが定義されているためです。設定したスタイルは CSS の「カスケード（継承）」の仕組みによって上書きされました。これを解決するには、CSS の「特異性（specificity）」という機能を利用します。特異性は、ブラウザーがどの CSS ルールを適用するかを判断する重み付けの仕組みです。特異性を利用すると、他のスタイルよりも優先的に自分のスタイルを適用させることができます。CSS の特異性に関する簡単な紹介は、プレーヤー外観のカスタマイズドキュメントを参照してください。
この場合、video-js クラスを使用すると、スタイルの優先順位が上がります。次のようにセレクターを組み合わせて変更します（最後のクラスの前にスペースを入れる点に注意してください。理由は特異性のルールによります）。
```
  <style>
    .video-js .vjs-big-play-button {
      background-color: #ff0000;
      opacity: .3;
    }
  </style>  
```
ページを再読み込みすると、すべてのスタイルが適用されているのが確認できます。
再度開発ツールの右側を確認すると、背景色の変更がもう上書きされていないことが確認できます。

Advanced コード実装

上記でセレクターとスタイルを使用した際の結果は、以下に示すようにプレーヤーの Advanced コード実装で使用されました。

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <style>
        .video-js .vjs-big-play-button {
          background-color: red;
          opacity: .3;
        }
      </style>
    </head>
    
    <body>
    
      <video-js data-account="1507807800001"
        data-player="default"
        data-embed="default"
        controls=""
        data-video-id="6065136830001"
        data-playlist-id=""
        data-application-id=""
        width="640" height="360">
    
      </video-js><script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
    
    </body>
    
    </html>

これは HTML ページで CSS を使用する非常に一般的な方法です。<style> ブロックが <video-js> タグと同じページ上にあります。

注：CSS の経験によっては、上記のコードで <video-js> タグに id 属性を設定していない理由を疑問に思うかもしれません。たとえば、#myPlayer .vjs-big-play-button のようなセレクターを使用することもできます。実際、それでも動作します。ただし、id セレクターを使用して作成した CSS は iframe プレーヤー実装では機能しないため、既存のクラス名のみを使用しました。id 属性を使用しないことで、スタイルを iframe プレーヤー実装にも直接適用できるようになります。

Standard コード実装

Standard（iframe）コード実装では、当然ながら Brightcove プレーヤーを iframe 内に配置し、その iframe を HTML ページに埋め込みます。iframe を含むページのスタイルを使用して iframe 自体のサイズを変更するなど、iframe 自体にスタイルを適用することは可能ですが、iframe を含むページのスタイルは iframe 内には「カスケード（継承）」しません。iframe は文字どおり別の HTML ページを読み込むため、iframe 内のコンテンツに適用したいスタイルは、その iframe 内の HTML ページに関連付ける必要があります。

Brightcove プレーヤーの iframe 実装を使用する場合、CSS を適用する手順は以下の通りです。

スタイルをインターネットでアクセス可能なファイルに配置する
スタイルシートをプレーヤーにリンクする（Studio または Player Management API を使用して実行）

注：以下の手順は、前の手順で完成した HTML（上記のコードスニペット）から作業を続けることを前提としています。その例を残しておきたい場合は、コードを別ファイルにコピーして、新しいファイルで以下の手順を開始してください。

Studio で動画を公開し、プレーヤーの iframe 実装コードをコピーします。
HTML ページ内のインページ埋め込みコードを iframe コードに置き換えます。

HTML ページが次のようになっていることを確認します。

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <style>
        .video-js .vjs-big-play-button {
          background-color: red;
          opacity: .3;
        }
      </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>

ページを開くと、ボタンに対するスタイルが適用されていないことがわかります。
customize-qs.css という名前のファイルを作成し、インターネット上でアクセス可能な場所に保存します。
ボタンのスタイルをカットし、そのファイルに貼り付けて保存します。<style> タグは含めず、ボタンのスタイル部分のみをファイルに保存します。ファイルの内容は以下の通りです。
```
    .video-js .vjs-big-play-button {
      background-color: red;
      opacity: .3;
    }
```

HTML ページが次のようになっていることを確認します。

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
    </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>

Studio で Players モジュールに移動し、このクイックスタートで使用しているプレーヤーを編集します。
Overview タブの Plugins セクションを展開します。
Stylesheets をクリックし、Add Stylesheet ボタンを押して、パスを入力します。
Save をクリックして変更を保存します。ページ右側のプレビュープレーヤーに、CSS スタイルがボタンに適用されたことが反映されます。
プレーヤーを公開するには、Publish Changes をクリックします。
開いているダイアログを閉じるには、Close をクリックします。
ブラウザーに戻りページを更新します。公開された変更が有効になると、iframe プレーヤーにスタイルが適用されていることが確認できます。変更が反映されるまで数分かかる場合があります。

スタイルを探る

このセクションでは、CodePen を使用して、上記よりもさらに詳細に大きなプレイボタンのスタイルをカスタマイズできます。気に入った外観ができたら、生成された CSS をコピーして、上記のいずれかのプレーヤー実装で使用できます。

少しわかりにくい点として、ボタン内の矢印は画像ではなくフォントファミリーの一部であることが挙げられます。そのため、サイズの制御には font-size を使用し、単位として em を指定します。

Pen を見る： 5.x 大きなプレイボタンのカスタマイズ（作成者：Matt Boles (@mboles)） — CodePen にて。