Inserting a video onto an HTML webpage can be great for your visitors. If you are working on a passion project, it can also add visual identity to the final product. Those working with a distinct project or brand will also have the opportunity to introduce themselves through the video.
When inserting a video to an HTML document, there are three common methods you can use. The answers to how to center a video in HTML are:
- Including a <center> HTML tag onto the document
- Typing a <div> container to include a video element onto the text-align:center style
- Including a margin with an auto 0px and the display:block style with the video
Centering a video using the <center> tag
This is one of the easiest methods when it comes to inserting a video to an HTML document. The <center> tag has been used for a long time now and is one of the most convenient ways to place a video in the middle of a page.
If you want to go this route, you can put an HTML <video> tag within the <center> tag to have a video in the middle of the page. The tags are as follows:
<center>
<video controls>
<source src=”video.webm” type=”video/webm” />
</video>
</center>
The <center> tag now comes across as a little obsolete. CSS has since become the most used tool for controlling how a type of content is presented. Still, the <center> tag is still supported on all modern internet browsers. You do not have to worry about it going away anytime soon, although it might be considered a legacy feature someday.
Centering a video with the <div> tag, as well as text-align:center
The <center> tag is not a commonly used convention for most HTML documents. These days, you can also come up with your own version of the tag. One way to do this is by typing in a <div> tag with a text-align:center alongside it.
If you need to keep using <div> throughout the webpage, you may include a style for the .center class. This will look like this:
div.center {
text-align: center;
}
You can then enclose the <video> tag with <div class=”center”>:
<div class=”center”>
<video controls>
<source src=”video.webm” type=”video/webm” />
</video>
</div>
The video will then be placed right at the middle of the <div> element.
Centering the video using a margin and display style
You can choose not to add a wrapper onto the <video> tag. Although the other methods contain one, it is not a prerequisite for centering your video. In fact, you can use some style directly on the <video> tag.
The style looks like this:
video.center {
display: block;
margin-left: auto;
margin-right: auto;
}
The display:block style is necessary. The <video> element makes use of display:inline so excluding it will cause problems.
If you replace the <video> tag with a block element, the margin will not work as intended. The reason is that an inline element will only fill up the width needed to render its content.
If you replace the display property with a block, the <video> tag will instead occupy the full width of the page. Placing margin-left and margin-right to “auto” will dispense the vacant space on the left and right side equally.
By utilizing the CSS above, you are only required to include the center class to the <video> tag. You may do this each time you want to put a video element in the middle. It looks like this:
<video class=”center” controls>
<source src=”video.webm” type=”video/webm” />
</video>
Centering a YouTube video using HTML
YouTube and Vimeo are among the most common video providers. Most people watch content from these sites. It can help your website a lot if your videos are hosted on these platforms. These websites have a subscribe feature that allows you to connect with a built-in audience.
You can also link the webpage to the YouTube channel for better traction, since many internet users go to the platform daily.
If you are embedding a YouTube video to your webpage, you will be asked to include an <iframe> tag. It will then be replicated, appearing in your HTML text. YouTube has the ability to distribute videos via an embed code through the share feature.
Read also: Video Editing Services from fixthephoto.com and take a look at what great things they can do to make your video stand out.
Here is what the YouTube embed code usually looks like:
<iframe
width=”560″
height=”315″
src=”https://www.youtube.com/embed/<video-id>”
title=”YouTube video player”
frameborder=”0″
allowfullscreen
></iframe>
If you want to center the YouTube video, feel free to use any of the aforementioned methods. The same embed code is usually used by Vimeo, with just a few parameters changed to reflect the website. You may have to check with other video providers if their embed code is similar to the one that YouTube uses. Most websites provide the embed code via their share links.
Centering a video using HTML is one of the easiest tasks you can do with tags, CSS, or embed codes. Once you have mastered it, you can include as many videos as you can to the page. Feel free to center any video that resonates with your webpage!
