Ответ 1
Класс центра должен иметь ширину, чтобы сделать автоматическую маржу:
.center { margin: 0 auto; width: 400px; }
Затем я применил бы центральный класс к самому видео, а не к контейнеру:
<video class='center' …>…</video>
Как центрировать видео 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>
Я знаю, что это должно быть кое-что, что я пропускаю в утренние часы утра, но любая помощь будет оценена по достоинству.
Спасибо
Ответы
Ответ 2
У меня была та же проблема, пока я не понял, что элементы <video> являются встроенными элементами, а не элементами блока. Вам нужно только установить для элемента контейнера text-align: center;, чтобы центрировать видео по горизонтали на странице.
Ответ 3
КОД 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
}
Ответ 4
Сделайте это:
<video style="display:block; margin: 0 auto;" controls>....</video>
Прекрасно работает!: D
Ответ 5
У меня была такая же проблема. Это сработало для меня:
.center {
margin: 0 auto;
width: 400px;
**display:block**
}
Ответ 6
Я не предпочитаю центрироваться, просто используя тег видео, как говорит @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>Ответ 7
@snowBlind В первом примере, который вы указали, ваши правила стиля должны идти в <style> тег, а не <script> тег:
<style type="text/css">
.center {
margin: 0 auto;
}
</style>
Кроме того, я пробовал изменения, упомянутые в этом ответе (см. результаты http://jsfiddle.net/8cXqQ/7/), но они все еще не работают.
Вы можете окружать видео с помощью div и применять ширину и авто поля к div для центрирования видео (наряду с указанием атрибута width для видео, см. результаты в http://jsfiddle.net/8cXqQ/9/).
Но это не похоже на простейшее решение... не стоит ли центрировать видео без, чтобы его обернуть в контейнер div?
Ответ 8
Попробуйте следующее:
video {
display:block;
margin:0 auto;
}
Ответ 9
У меня была аналогичная проблема при обновлении веб-сайта в Dreamweaver. Структура сайта основана на сложном наборе таблиц, и это видео было в одной из основных ячеек макета. Я создал вложенную таблицу только для видео, а затем добавил атрибут 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>
Ответ 10
Все, что вам нужно сделать, - установить тег видео на display:block; FTW по умолчанию inline-block FTL.
Попробуйте это
.center {
margin: 0 auto;
width: (whatever you want);
display: block;
}
Ответ 11
Если у вас есть ширина в процентах, вы можете сделать это:
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>Ответ 12
Использовать поля <video> - это встроенный элемент, поэтому вам нужно добавить display block; в класс css.
Вы можете использовать специфические с, но я бы не использовал значения px. Используйте%, чтобы сделать его отзывчивым, например:
width: 50%;
Thatll сделает видео половину ширины окна просмотра.
См. исходную документацию здесь O Консорциум World Wide Web 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>Ответ 13
.center { width:500px; margin-right:auto; margin-left:auto; }
Ответ 14
Я нашел эту страницу, пытаясь центрировать выровнять пару видео. Таким образом, если я заключу оба видео в центре 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>
Работал для меня!