How to center HTML5 Videos?

后端未结

关注

 15  1781

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:37

I was having the same problem, until I realized that <video> elements are inline elements, not block elements. You need only set the container element to have text-align: center; in order to center the video horizontally on the page.

0 讨论(0)
发布评论:

提交评论
- 加载中...
猫巷女王i

2021-01-31 02:38
I will not prefer to center just using video tag as @user142019 says. I will prefer doing it like this:
```
.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>
```
This will make your video responsive at the same time the panel for controls will have the same size as the video rectangle (I tried what @user142019 says and the video was centered, but it looked ugly in Google Chrome).
0 讨论(0)
发布评论:

提交评论
- 加载中...
轮回少年

2021-01-31 02:39
Do this:
```
<video style="display:block; margin: 0 auto;" controls>....</video>
```
Works perfect! :D
0 讨论(0)
发布评论:

提交评论
- 加载中...
无人共我

2021-01-31 02:39
All you have to do is set you video tag to display:block; FTW the default is inline-block FTL.

Try this
```
.center {
  margin: 0 auto;
  width: (whatever you want);
  display: block;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦谈多话

2021-01-31 02:40

If you have a width in percent, you can do this :

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>

0 讨论(0)

無奈伤痛

2021-01-31 02:41

I found this page while trying to center align a pair of videos. So, if I enclose both videos in a center div (which I've called central), the margin trick works, but the width is important (2 videos at 400 + padding etc)

<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>

Worked for me!

0 讨论(0)

1 2 3 下一页