As a Web Developer there many times I come in the situation when My Client wanted to have Videos to be in Center aligned. So I have written quick guide on How to Center html 5 videos in different css frameworks and core CSS3.

There will be many unknown reasons many times we can not make the video tag in center of the page. So Here I am writing a complete guide with code snippet in Simple HTML5 with CSS 3, Bootstrap 4, Bootstrap 5 , Bulma. Which may help you to get it quickly sort your problem.

Video Center align in HTML5 with CSS 3 Code Sample

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

video {
  width: 50% !important;
  height: auto !important;
  margin: 0 auto;
  display: block;
}

Video Center align in Bootstrap 4 & 4.4 .1 Code Sample

    <div class="container">
        <div class="row m-4">
            <div class="col">
                <div class="d-flex justify-content-between">
                    <div class="embed-responsive embed-responsive-21by9">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/S9ovGsfA0lU"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

Video Center align in Bootstrap 5 & 5.1 Code Sample

    <div class="container">
        <div class="row">
            <div class="col">
                <div class="mx-auto">
                    <div class="ratio ratio-16x9">
                        <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

I hope above sample code will help you to solve the issue. Do let me know if you still not able to make Video align in center in your project.

If you wanted to learn more on Web Development you can check our below links.