当前位置：文江博客话题详情

CSS HTML Video

如何居中 HTML5 视频？

发布于 2024-11-05 06:24:02 字数 661 浏览 1 评论 0 原文

我只是在摆弄一些 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>

我知道这一定是我在凌晨时忽略的事情，但任何帮助将不胜感激。

谢谢

原文

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 itself, and I've wrapped the video in a separate div. However, the video stays on the left.

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

I know this must be something I'm overlooking in the wee hours of the morning, but any help would be appreciated.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

書生途 2024-11-12 06:24:02

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
}

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

脸赞 2024-11-12 06:24:02

中心类必须具有宽度才能使自动边距起作用：

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

然后我将中心类应用于视频本身，而不是容器：

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

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

ぃ双果 2024-11-12 06:24:02

我遇到了同样的问题，直到我意识到元素是内联元素，而不是块元素。您只需将容器元素设置为 text-align: center; 即可将视频在页面上水平居中。

回复收藏 0 原文

檐上三寸雪 2024-11-12 06:24:02

这样做：

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

效果完美！：D

Do this:

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

Works perfect! :D

回复收藏 0 原文

青萝楚歌 2024-11-12 06:24:02

我不喜欢像 @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中看起来很难看）。

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

っ〆星空下的拥抱 2024-11-12 06:24:02

我也遇到了同样的问题。这对我有用：

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

I was having the same problem. This worked for me:

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

回复收藏 0 原文

乱了心跳 2024-11-12 06:24:02

试试这个：

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

Try this:

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

回复收藏 0 原文

一指流沙 2024-11-12 06:24:02

@snowBlind 在您给出的第一个示例中，您的样式规则应该放在

<style type="text/css">
  .center {
    margin: 0 auto;
  }
</style>

另外，我尝试了此答案中提到的更改（查看结果 http://jsfiddle.net/8cXqQ/7/），但它们似乎仍然不起作用。

您可以用 div 包围视频，并对 div 应用宽度和自动边距以使视频居中（以及指定视频的宽度属性，请参阅 http://jsfiddle.net/8cXqQ/9/）。

但这似乎不是最简单的解决方案...我们是否应该能够将视频居中而不必将其包装在容器 div 中？

@snowBlind In the first example you gave, your style rules should go in a <style> tag, not a <script> tag:

<style type="text/css">
  .center {
    margin: 0 auto;
  }
</style>

Also, I tried the changes that were mentioned in this answer (see results at http://jsfiddle.net/8cXqQ/7/), but they still don't appear to work.

You can surround the video with a div and apply width and auto margins to the div to center the video (along with specifying width attribute for video, see results at http://jsfiddle.net/8cXqQ/9/).

But that doesn't seem like the simplest solution...shouldn't we be able to center a video without having to wrap it in a container div?

回复收藏 0 原文

国粹 2024-11-12 06:24:02

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

I had a similar problem in revamping a web site in Dreamweaver. The site structure is based on a complex set of tables, and this video was in one of the main layout cells. I created a nested table just for the video and then added an align=center attribute to the new table:

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

老旧海报 2024-11-12 06:24:02

您所要做的就是将视频标签设置为 display:block; FTW，默认为 inline-block FTL。

试试这个

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

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

我不会写诗 2024-11-12 06:24:02

如果你有百分比宽度，你可以这样做：

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>

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

落花浅忆 2024-11-12 06:24:02

使用边距是一个内联元素，因此您必须将 display block; 添加到您的 css 类中。

您可以使用特定的，但我不会使用 px 值。使用 % 使其具有响应性，例如：

width: 50%;

这将使视频成为视口宽度的一半。

请参阅此处的原始文档 O 万维网联盟 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代码

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

琉璃繁缕 2024-11-12 06:24:02

<center>
    <video controls width="100%" height="480">
        <source src="video.mp4" type=video/mp4>
    </video>
</center>

将您的封装在

标记内，

也可以。

<center>
    <video controls width="100%" height="480">
        <source src="video.mp4" type=video/mp4>
    </video>
</center>

Encapsulate your <video> within <center></center> tags, <figure></figure> also works.

回复收藏 0 原文

爱，才寂寞 2024-11-12 06:24:02

.center { width:500px; margin-right:auto; margin-left:auto; }

.center { width:500px; margin-right:auto; margin-left:auto; }

回复收藏 0 原文

错爱 2024-11-12 06:24:02

我在尝试居中对齐一对视频时发现了此页面。因此，如果我将两个视频放在一个中心 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>

对我有用！

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

〃温暖了心ぐ 2024-11-12 06:24:02

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

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

回复收藏 0 原文

む无字情书 2024-11-12 06:24:02

如果使用 bootstrap，则可以使用 d-block 和 m-auto 类。

<video class="d-block m-auto" width="1100px" control> 
<source src="...." type="video/mp4" /> 
</video>

If you use bootstrap, you can use d-block and m-auto classes.

<video class="d-block m-auto" width="1100px" control> 
<source src="...." type="video/mp4" /> 
</video>

回复收藏 0 原文

~没有更多了~

关于作者

錯遇了你

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

如何居中 HTML5 视频？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（17）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如何居中 HTML5 视频？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（17）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。