CSS を使用して動画を中央に配置

この記事では、ユーザーは CSS のみを使用して <video> 要素を中央に配置する方法を学習します。 CSS を使用して動画を中央に配置するには、以下の複数の方法を説明しました。

ただし、ユーザーは <video> 要素を <center> タグ内に配置でき、ビデオ要素を簡単に中央に配置できます。 ただし、この例では、CSS プロパティのみを使用する必要があるため、<center> タグは使用しません。

margin-left および transform CSS プロパティを使用して、動画要素を中央に配置する

CSS の margin-left および transform プロパティを使用して、HTML の <center> タグを使用せずにビデオ要素を中央に配置できます。

margin-left プロパティを使用すると、要素の左側にスペースを残すことができます。 margin-left プロパティの 50vw 値を使用すると、要素の左側に画面幅の半分が残されます。

ここで、値の vw は画面のウィンドウ サイズを表します。

transform プロパティは、CSS を使用して要素の位置を変更するために使用されます。 transform プロパティの値として translate(-50%) を使用すると、ビデオが負の x 方向に移動します。つまり、ビデオ要素の幅の 50% が左に移動します。

たとえば、HTML にビデオを埋め込むために、その中に <video> タグと <source> タグを作成しました。 その後、いくつかの CSS プロパティを <video> タグに適用しました。

transform: translate(-50%) プロパティを適用することで、動画の中心線が画面の中心線よりも優先されるようにします。

HTML コード:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS コード:

video {
    margin-left: 50vw;
    transform: translate(-50%);
}

display および margin CSS プロパティを使用して、動画要素を中央に配置する

display および margin CSS プロパティを使用して、この部分のビデオ要素を中央に配置します。

ユーザーは、display プロパティの値を設定して、要件に従って Web ページに要素をレンダリングできます。 この場合、display: block を設定して、ブロック内の要素を表示します。

上記の例で説明したように、margin プロパティを使用すると、要素の周囲にスペースを設定できます。 margin: 0 auto 値を margin プロパティに設定します。

ここで、0 は要素の上下に 0 スペースを設定する必要があることを表します。 値 auto は、要素の左右に等しいスペースを設定する必要があることを表します。

このように要素の左右を等間隔にすることで、CSSだけで動画を中央に寄せることができます。

以下の例で HTML <video> 要素を作成し、上記の CSS プロパティを適用しました。

HTML コード:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

CSS コード:

video {
    display: block;
    margin: 0 auto;
}

width、justify-content、および display CSS プロパティを使用して、動画要素を中央に配置する

この例では、HTML <div> 要素を作成し、container クラス名を割り当てます。 <div> 要素内に 2つの <video> 要素を追加します。

ここでは、クラス名を使用して <div> 要素にアクセスし、CSS プロパティを <div> 要素全体に適用します。

CSS では、width:100% プロパティを使用します。これは、container クラスを持つ <div> 要素の幅が画面の幅と同じ幅を持つ必要があることを指定します。 その後、justify-content: center CSS プロパティを使用します。これにより、<div> 要素のコンテンツを中央に配置できます。

display: flex および flex-direction: Row プロパティは、両方の <video> 要素を 1 行に表示します。 ここで、justify-content プロパティは、<div> の要素を中央に配置する際に主な役割を果たします。

これら 3つのプロパティを使用して、<div> 要素のコンテンツを中央に配置できます。

HTML コード:

<div class="container">
    <video width="300" height="200" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
    <video width="320" height="240" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
</div>

CSS コード:

.container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

上記の出力画像では、ユーザーは両方のビデオが 1 行に並んでおり、画面の中央に配置されていることがわかります。

この記事では、CSS を使用して <video> 要素を中央に配置する 3つの方法を説明しました。 3つの方法はすべて、要素固有ではないため、他の HTML 要素と共に使用して中央揃えにすることができます。