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

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

1 голос
/ 26 августа 2014

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

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

.center {
  margin: 0 auto;
  width: (whatever you want);
  display: block;
}
1 голос
/ 02 декабря 2012

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

Я нашел эту страницу, пытаясь выровнять пару видео по центру.Итак, если я заключу оба видео в центр 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 голосов
/ 04 мая 2011 
.center { width:500px; margin-right:auto; margin-left:auto; }
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...