How to center a video [closed]

I can not center a video in a wordpress blog post.
Here is the shortcode used for the video:


It is an mp4 video file from my uploaded media. I have tried to add this to my style.css, and still did not work:

.wp-video {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Any help please….

1 Answer
1

To center an element, you will also have to style it’s parent element too. So let’s say, you video has a structure like this:

<div class="parent-class"> 
    <video class="wp-video">
    </video>
</div>

To center the video, you will have to give it’s parent a width. Using:

.parent-class{
    width:100%;
    display:block;
}

Now, you can use this to do the final touch:

.wp-video {
    text-align: center;
    margin: 0 auto;
    max-width: 400px;
    display: block
}

Notice that you have to define a width for this video, since your video has a width of 1920px, which for sure will overflow most of the screens.

Leave a Comment