it-roy-ru.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>

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

Спасибо

37
snowBlind

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

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

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

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

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

32
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
}
28
badr

Сделай это:

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

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

11
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

@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/ ). ,.

Но это не кажется самым простым решением ... разве мы не сможем центрировать видео без, чтобы обернуть его в контейнерный элемент?

2
user456814

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

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

Используйте поля <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
Renato Lazaro

Все, что вам нужно сделать, это установить для вашего видео тега display:block; FTW, по умолчанию inline-block FTL.

Попробуй это

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

У меня была похожая проблема при обновлении веб-сайта в 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>
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