CODEWITHSUNDEEP
cssvideocenter
Rhiannon
Rhiannon

Reputation: 211

How do you center a video using CSS

I'm trying to center a video within my site but I don't want to use the center tags in HTML because it's kinda obsolete. How do I do this with CSS? Here's my HTML code if it's any help.

<center>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</center>

Upvotes: 19

Views: 171644

Answers (5)

Gr4y
Gr4y

Reputation: 178

I know this topic was so long but here ya go:

This is for the center of the page

video {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

And this is for the middle of the line

video {
  display: block;
  margin: auto;
}

Just for who are looking for this

Upvotes: 9

khaki
khaki

Reputation: 365

Here are 3 ways to center your video:

1. Using margin

video {
  display: block;
  margin: auto;
}

2. Using transform

video {
  margin-left: 50vw;
  transform: translate(-50%);
}

3. Using a container & flexbox

.container video {
  display: flex;
  justify-content: center;
}

Upvotes: 19

Kerim Tim.
Kerim Tim.

Reputation: 1159

To center video horizontally add:

display: block;
margin: 0 auto;

Upvotes: 7

user760226
user760226

Reputation: 163

Try this, have a wrapper div around your video tag. html5 videos and images are treated like text when styling. So a text-align:center will work. You can check the fiddle below.

<div class="video">  
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>

Upvotes: 1

leoMestizo
leoMestizo

Reputation: 1499

Here's an example: http://jsfiddle.net/Cn7SU/

Just add these CSS rules to the element video:

display: block;
margin: 0 auto;

Add the display: block property is very important. Otherwise you can't center the element.

Upvotes: 26

Related Questions