How to center HTML5 Videos?_问答_开发者_运维开发者技术经验分享

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

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
}

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>

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.

Do this:

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

Works perfect! :D

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

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

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

Try this:

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

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

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>

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

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>

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

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

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

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!

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

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>

How to center HTML5 Videos?

精彩评论

关注公众号

热门标签

图文推荐

How to center HTML5 Videos?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：