How to center HTML5 Videos?

后端未结

关注

 15  1783

I\'m just messing around with some HTML5, and I was trying to center a video on the page. For some reason I can\'t get it to center. I\'ve tried to add a class to the video tag

相关标签:

15条回答

遇见更好的自我

2021-01-31 02:47

HTML CODE:

<div>
 <video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600">⁪</video>
</div>

CSS CODE:

.center {
    margin-left: auto;
    margin-right: auto;
    display: block
}

0 讨论(0)

执笔经年

2021-01-31 02:47

<html>
  <body>
    <h1 align="center">
      <video width="1000" controls>
        <source src="video.mp4" type="video/mp4">
      </video>
    </h1>
  </body>
</html>

0 讨论(0)

终归单人心

2021-01-31 02:48
Try this:
```
video {
display:block;
margin:0 auto;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
萌比男神i

2021-01-31 02:51
The center class must have a width in order to make auto margin work:
```
.center { margin: 0 auto; width: 400px; }
```
Then I would apply the center class to the video itself, not a container:
```
<video class='center' …>…</video>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
故里飘歌

2021-01-31 02:52
```
.center { width:500px; margin-right:auto; margin-left:auto; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

失恋的感觉

2021-01-31 02:53

Use margins <video> is an inline element so you'll have to add display block;to your css class.

You can use specific with, but I wouldn’t use px values. Use % to make it responsive, like:

width: 50%;

That’ll make the video half of the viewport width.

See the original documentation here 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>

See the code ready here for more understanding.

You can view the code online Fiddle

0 讨论(0)