web-dev-qa-db-ja.com

HTML5ビデオを中央に配置する方法は？

HTML5をいじっていますが、ビデオをページの中央に配置しようとしていました。何らかの理由で、私はそれを中央に置くことができません。ビデオタグ自体にクラスを追加しようとしましたが、ビデオを別のdivでラップしました。ただし、ビデオは左側に残ります。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Test</title>
    <script type="text/css">
    .center {
      margin: 0 auto;
    }
    </script>
  </head>
  <body>
    <div class="center">
      <video controls="controls">
        <source src="/media/MVI_2563.ogg" type="video/ogg" />
        Your browser does not support the video tag.
      </video>
    </div>
  </body>
</html>

これは私が朝の早い時間に見落としているものでなければならないことを知っていますが、どんな助けもありがたいです。

ありがとう

htmlcsshtml5video
40
snowBlind

自動マージンを機能させるには、中心クラスに幅が必要です。

.center { margin: 0 auto; width: 400px; }

次に、コンテナではなく、ビデオ自体にセンタークラスを適用します。

<video class='center' …>…</video>
33
user142019

<video>要素がブロック要素ではなくインライン要素であることに気付くまで、私は同じ問題を抱えていました。コンテナ要素にtext-align: center;を設定するだけで、ビデオをページの水平方向の中央に配置できます。

37
djpMusic

HTMLコード：

<div>
 <video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600"></video>
</div>

CSSコード：

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}
32
badr

これを行う：

<video style="display:block; margin: 0 auto;" controls>....</video>

完璧に動作します！ ：D

13
mehulmpt

私は同じ問題を抱えていました。これは私のために働いた：

.center {
    margin: 0 auto; 
    width: 400px;
    **display:block**
 }
3
user1399749

@ user142019にあるように、ビデオタグを使用して中央に配置することは好ましくありません。私はこのようにすることを好みます：

.videoDiv
{
    width: 70%; /*or whatever % you prefer*/
    margin: 0 auto;
    display: block;
}
<div class="videoDiv">
  <video width="100%" controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support the video tag.
  </video>
</div>

これにより、コントロールのパネルがビデオの長方形と同じサイズになると同時に、ビデオの応答性が向上します（@ user142019の説明を試して、ビデオを中央に配置しましたが、Google Chromeでは見苦しくなりました）。

3
Juan Ignacio Avendaño Huergo

@snowBlind最初の例では、スタイルルールは<script>タグではなく、<style>タグに入れます。

<style type="text/css">
  .center {
    margin: 0 auto;
  }
</style>

また、 この回答 （ http://jsfiddle.net/8cXqQ/7/ の結果を参照）に記載されている変更を試みましたが、まだ変更されません動作するように見えます。

ビデオをdivで囲み、divに幅と自動マージンを適用してビデオを中央に配置できます（ビデオのwidth属性を指定するとともに、 http://jsfiddle.net/8cXqQ/9/）の結果を参照してください ）。

しかし、それは最も簡単な解決策ではないようです...ビデオを中央に配置することはできませんwithoutそれをコンテナdivにラップする必要はありません？

2
user456814

これを試して：

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

マージンの使用<video>はインライン要素なので、display block;をcssクラスに追加する必要があります。

特定のwithを使用できますが、px値は使用しません。次のように、％を使用してレスポンシブにします。

width: 50%;

これにより、ビデオがビューポート幅の半分になります。

ここで元のドキュメントを参照してくださいO World Wide Web Consortium W3C

mystyle.css

video {
      width: 50% !important;
      height: auto !important;
      margin: 0 auto;
      display: block;
    }

    h1 {
      text-align: center;
      color: #C42021;
      font-size: 20px;
    }
<!DOCTYPE html>
        <html>
           <head>
              <meta charset="UTF-8">
              <title>Test</title>
               <link rel="stylesheet" type="text/css" href="mystyle.css">
           </head>
           <body>
              <h1>
                 How do you center a video 
              </h1>
              <div class="center">
                 <video controls="controls">
                    <source src="https://repositorio.ufsc.br/xmlui/bitstream/handle/123456789/100149/Vídeo%20convertido.mp4" type="video/mp4" />
                 </video>
              </div>
           </body>
        </html>

詳細については、こちらのコードをご覧ください。

Fiddleコードをオンラインで表示できます

1
Renato Lazaro

必要なことは、ビデオタグをdisplay:block; FTWに設定することだけです。デフォルトはinline-block FTLです。

これを試して

.center {
  margin: 0 auto;
  width: (whatever you want);
  display: block;
}
1
user3529598

DreamweaverでWebサイトを改良する際にも同様の問題がありました。サイト構造は複雑なテーブルセットに基づいており、このビデオはメインレイアウトセルの1つにありました。ビデオ用にネストされたテーブルを作成し、align=center属性を新しいテーブルに：

<table align=center><tr><td>
    <video width=420 height=236 controls="controls" autoplay="autoplay">
        <source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="video/video.webm" type='video/webm' >
        <source src="video/video.mp4" type='video/mp4'>
        <p class="sidebar">If video is not visible, your browser does not support HTML5 video</p>
    </video>
</td></tr></table>
1
Moose-Anne Squirrel

幅がパーセントである場合、これを行うことができます：

video {
  width: 50% !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}
<!DOCTYPE html>
<html>

<body>

  <video controls>
    <source src="http://www.nasa.gov/downloadable/videos/sciencecasts-_total_Eclipse_of_the_moon.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>

</body>

</html>
1
Sébastien Gicquel
.center { width:500px; margin-right:auto; margin-left:auto; }
0
0xAli

ビデオのペアを中央揃えしようとしたときにこのページを見つけました。したがって、両方のビデオをセンターdiv（セントラルと呼んでいます）で囲むと、マージントリックは機能しますが、幅は重要です（2ビデオで400 +パディングなど）

<div class=central>
    <video id="vid1" width="400" controls>
        <source src="Carnival01.mp4" type="video/mp4">
    </video> 

    <video id="vid2" width="400" controls>
        <source src="Carnival02.mp4" type="video/mp4">
    </video>
</div>

<style>
div.central { 
  margin: 0 auto;
  width: 880px; <!--this value must be larger than both videos + padding etc-->
}
</style>

私のために働いた！

0
drmarkreuter