HTMLで動画を中央に配置する

胡金庫 2023年2月19日
  1. HTML で marginwidth および displayCSS プロパティを使用してビデオを中央揃えにする
  2. HTML で center タグを使用してビデオを中央に配置する
  3. text-align CSS プロパティを使用して、ビデオを HTML の中央に配置する
HTMLで動画を中央に配置する

このチュートリアルでは、ビデオを HTML で中央揃えにするいくつかの方法について説明します。

HTML で marginwidth および displayCSS プロパティを使用してビデオを中央揃えにする

marginwidthdisplayCSS プロパティの組み合わせを使用して、ビデオを HTML の中央に配置できます。margin プロパティを使用して、4 方向すべての要素のマージンを設定します。

このメソッドでは、プロパティを使用して video タグにマージンを適用します。width プロパティを使用して、要素に特定の幅を与えることができます。

幅は、pxem、さらにはパーセンテージなど、さまざまな単位で設定できます。以下の例で、これらのユニットの使用の違いを確認します。

display プロパティは、選択した要素の動作表示を設定するために不可欠です。blockinline-blockinline などの値を取ります。

最後に、video タグを使用して HTML にビデオを挿入します。

たとえば、クラス center を使用して HTML で video タグを記述します。まず、src 属性でビデオファイルの正しい URL を指定します。

次に、controls 属性を書き込み、video タグを閉じます。CSS で center タグを選択し、margin プロパティを適用します。

プロパティの値を 0 auto に設定し、ビデオの幅を 300px にします。最後に、display プロパティを block に設定します。

ここで、上記の手順で行ったことを説明します。videoタグのcontrols属性は、一時停止、再生、スライド、音量の増減、フルスクリーンの切り替えを行うためのコントロールを表示します。

タグから controls 属性を削除すると、コントロールバーがビデオに表示されなくなります。

CSS の margin プロパティは、上下のマージンを 0 に設定します。leftrightの余白はautoに設定されています。

これは、ビデオが指定された幅 300px を取り、残りのスペースが均等に分割され、左右の余白として設定されることを意味します。

ビデオ要素は、ビデオがブロック全体のスペースを占めるように、ブロックレベルの要素として設定されます。これにより、先のプロパティを有効にすることができます。

したがって、marginwidthdisplay プロパティなどの CSS プロパティを使用して、ビデオを HTML の中央に配置できます。

サンプルコード:

<video class="center" src="pointing_pink.mp4" controls></video>
.center{
 margin: 0 auto;
 width: 300px;
 display: block;
}

ただし、この方法には欠点があります。上記の例では、widthpx 単位を使用しています。

ブラウザウィンドウのサイズを変更したり、モバイルビューから Web サイトを閲覧したりすると、ビデオが応答しなくなります。

この問題を解決するために、width プロパティで%または vw を使用できます。これらのユニットを使用すると、ビデオ要素が応答します。

以下の例を見てみましょう。

.center{
 margin: 0 auto;
 width: 40%;
 /* widht:40vw */
 display: block;
}

HTML で center タグを使用してビデオを中央に配置する

centerHTML タグを使用して、要素を HTML の中央に配置することもできます。

タグは HTML4 まで使用されていました。最近のブラウザはタグをサポートしていません。

ただし、一部の古いブラウザは引き続きサポートしています。したがって、HTML の要素を中央に配置するために center タグを使用しないことをお勧めします。

とにかく、このセクションでは、ビデオを中央に配置するためのタグの使用法を調べます。

たとえば、video タグを作成してビデオを挿入します。width プロパティを使用して、ビデオに特定の幅を与えます。

次に、video タグを center タグでラップします。したがって、ビデオは中央に配置されます。

<center>
 <video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>

text-align CSS プロパティを使用して、ビデオを HTML の中央に配置する

前述のように、center タグの使用はお勧めしません。center タグの代わりに、text-alignCSS プロパティを使用することもできます。

text-align プロパティを center 要素の中央に設定できます。この手法を実装して、ビデオを中央に配置できます。

次に、ビデオをコンテナーにラップして、スタイルを適用できます。

たとえば、クラス centerdiv を作成します。div 内に、ビデオを挿入するための video タグを作成します。

ビデオの幅を HTML で設定するか、CSS の width プロパティを使用できます。CSS で、center クラスを選択し、text-align プロパティを center に設定します。

したがって、ビデオは中央に配置されます。

サンプルコード:

 <div class="center">
 <video src="pointing_pink.mp4" controls width="400"></video>
 </div>
.center{
 text-align: center;
}

この記事では、ビデオを HTML で中央揃えにする 3つの異なる方法を学びました。margin プロパティ、center タグ、および text-align プロパティを使用して、ビデオを HTML の中央に配置しました。

著者: 胡金庫
胡金庫 avatar 胡金庫 avatar

DelftStack.comの創設者です。Jinku はロボティクスと自動車産業で8年以上働いています。自動テスト、リモートサーバーからのデータ収集、耐久テストからのレポート作成が必要となったとき、彼はコーディングスキルを磨きました。彼は電気/電子工学のバックグラウンドを持っていますが、組み込みエレクトロニクス、組み込みプログラミング、フロントエンド/バックエンドプログラミングへの関心を広げています。

LinkedIn Facebook