Подтвердить что ты не робот

Как центрировать видео 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>

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

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

Класс центра должен иметь ширину, чтобы сделать автоматическую маржу:

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

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

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

Ответ 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>

Работал для меня!