Skip to content

Magnus7Lab

Free Web Development Tutorials & More

  • PHP TutorialsExpand
    • CodeIgniter 3
    • CodeIgniter 4
  • CSS FrameworksExpand
    • Bootstrap 4
    • Bootstrap 5
    • Bulma
  • WordPressExpand
    • Themes
    • Plugins
  • Cloud Tutorials
Magnus7Lab
Free Web Development Tutorials & More
How To

How to center HTML5 Videos?

ByTeam September 21, 2021September 23, 2021 September 23, 2021 Reading Time: 2 minutes

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.

  • How To
  • News
Post Tags: #CSS3#HTML5
Team

Post navigation

Previous Previous
Hello world!

Recent Posts

  • How to center HTML5 Videos?
  • Hello world!

© 2023 Magnus7Lab

  • Home
  • Privacy Policy
  • Contact
  • PHP Tutorials
    • CodeIgniter 3
    • CodeIgniter 4
  • CSS Frameworks
    • Bootstrap 4
    • Bootstrap 5
    • Bulma
  • WordPress
    • Themes
    • Plugins
  • Cloud Tutorials
Search