Как центрировать HTML5 видео? - PullRequest
Новая
       1

Как центрировать HTML5 видео?

37 голосов
/ 04 мая 2011

Я просто бездельничаю с каким-то 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>

Я знаю, что это должно быть то, что я пропускаю в первые часы утра, но любая помощь будет признательна.

Спасибо

Ответы [ 14 ]

35 голосов
/ 05 декабря 2012

У меня была такая же проблема, пока я не понял, что элементы <video> являются встроенными элементами, а не блочными элементами .Вам нужно только установить элемент контейнера на text-align: center;, чтобы центрировать видео по горизонтали на странице.

31 голосов
/ 29 марта 2013

КОД 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
}
31 голосов
/ 04 мая 2011

Центральный класс должен иметь ширину, чтобы заставить работать автоматическое поле: 

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

Тогда я бы применил центральный класс к самому видео, а не к контейнеру: 

<video class='center' …>…</video>
12 голосов
/ 08 июля 2013

Сделайте это: 

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

Работает отлично! : D

3 голосов
/ 17 марта 2018

Я не предпочитаю центрироваться, просто используя тег видео, как говорит @ 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 голосов
/ 17 мая 2012

У меня была такая же проблема.Это сработало для меня: 

.center {
    margin: 0 auto; 
    width: 400px;
    **display:block**
 }
2 голосов
/ 10 марта 2013

Попробуйте это: 

video {
display:block;
margin:0 auto;
}
2 голосов
/ 01 июня 2011

@ snowBlind В первом примере, который вы привели, ваши правила стиля должны быть в теге

1 голос
/ 04 июля 2017

Использовать поля <video> является встроенным элементом, поэтому вам придется добавить display block; к вашему css классу.

Вы можете использовать конкретный с, но я бы не сталиспользуйте значения 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 голос
/ 20 июня 2016

Если у вас есть ширина в процентах, вы можете сделать это: 

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>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...