DIV IDでDIVコンテナを参照する

DIVコンテナは、コンテナのDIV IDを使用して参照することができます。

myvideo.cssファイルで、playerwrapper divコンテナの非常にシンプルなスタイルを 定義しました。divにIDを与えることにより、div ID名でプレイヤーコンテナを参照できるように なります。次の例では、div IDはplayerwrapperになっています。プレイヤーは、
  • マージンから挿入される。
  • 黒の背景を使用。
  • ボーダーを使用。

これらスタイルに加えて、プレイヤーの不透明度を、ビデオがわずかながら透き通るように 設定します。通常のビデオ再生では、これはあまり望ましい設定ではありません。しかしながら、こういったプレイヤー の不透明度を設定するCSSスタイルは、視聴者がポーズしているとき、またはその他イベントで使用することができます。CSSと JavaScriptを使用して、好きなだけプレイヤーのUIスタイルおよびテーマを作成することができます。

参考例

次の例は、divコンテナに対するdiv IDの定義、およびシンプルなスタイルの適用方法を説明して います。

#playerwrapper {
    width: 800px;
    height:300px;
    background-color: black;
    margin: 58px;
    opacity: 0.5;
    border:10px solid silver;
}

この記事はお役にたちましたか?