CSSでデフォルトのスタイルをオーバーライドする例

こちらの例では、カスタムカスケーディングスタイルシート (CSS) でスタイル設定をオーバーライドする方法を説明します。

次の例はHTML5プレイヤー CSSクラス名で定義されているクラス名を再定義することでデフォルトのスタイルをオーバーライドする方法を説明します。
注: 以下で 強調表示されている!important ディレクティブ (再定義されたプロパティを追跡)を必ず使用してください。これにより、再定義したクラスがデフォルトより優先されるようになります。
/* Ooyala-specific classes */

/* Background color of the play progress bar */
/* Use !important to force override */
.oo_playhead_progress {
        background:red !important;
        }

/* Background color of the buffer progress bar */
/* Use !important to force override */
.oo_buffer_progress {
        background:#800 !important;
        }

/* Put a picture of Super Mario under playhead ("slider") */
/* Use !important to force override */
.oo_playhead {
        background-image: url(https://some.url.to.an.image/images.jpg) !important;
        } 
    
上記CSSスタイルはこちらのスニペットで示されている効果があります。

確実にカスタムのCSSファイルがプレイヤーで読み込まれるようにするには、以下をご覧ください。 CSSにリンクする

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