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>
これは私が朝の早い時間に見落としているものでなければならないことを知っていますが、どんな助けもありがたいです。
ありがとう
自動マージンを機能させるには、中心クラスに幅が必要です。
.center { margin: 0 auto; width: 400px; }
次に、コンテナではなく、ビデオ自体にセンタークラスを適用します。
<video class='center' …>…</video>
<video>
要素がブロック要素ではなくインライン要素であることに気付くまで、私は同じ問題を抱えていました。コンテナ要素にtext-align: center;
を設定するだけで、ビデオをページの水平方向の中央に配置できます。
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
}
これを行う:
<video style="display:block; margin: 0 auto;" controls>....</video>
完璧に動作します! :D
私は同じ問題を抱えていました。これは私のために働いた:
.center {
margin: 0 auto;
width: 400px;
**display:block**
}
@ 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では見苦しくなりました)。
@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にラップする必要はありません?
これを試して:
video {
display:block;
margin:0 auto;
}
マージンの使用<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>
詳細については、こちらのコードをご覧ください。
必要なことは、ビデオタグをdisplay:block;
FTWに設定することだけです。デフォルトはinline-block
FTLです。
これを試して
.center {
margin: 0 auto;
width: (whatever you want);
display: block;
}
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>
幅がパーセントである場合、これを行うことができます:
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>
.center { width:500px; margin-right:auto; margin-left:auto; }
ビデオのペアを中央揃えしようとしたときにこのページを見つけました。したがって、両方のビデオをセンター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>
私のために働いた!