Videos From Your Website

With video publishing, a choice is available:

Deliver video via YouTube or other video depository.
Have full control of delivery at your own website.

Video can be delivered from your own website with these two steps:

Upload the video file to your server.
Use the HTML5 video tag to show the video on your web page.

The first step is self-explanatory. Upload a .mp4 video file and note its URL (you'll need the URL in the second step).

The second step, the video tag, has a handful of options from which to select.

→ The video may be autoplayed.

→ The video may start muted so no sound emits until the user raises the volume.

→ The video may have controls — start, stop, volume, etc. Or no controls. It's up to you.

You usually would provide controls because the user is unable to stop the video, change the volume, etc, without the controls — unless the user is savvy enough to know they have access to controls when they right‑click on the video.

→ The image to display before the video starts playing (the poster image) may be specified — so the browser won't select a frame with an embarrassing pose.

→ The dimensions of the video viewing area may be specified. The video will fit itself within the video area, maintaining its width/height proportions.

The video tag can be used for three different video formats:

The MP4 format works on all popular browsers. The Ogg and WebM formats are unlikely to work with Internet Explorer or Safari until an upgrade includes those formats.

Constructing the `video` Tag

Upload an MP4 video to your server. Make a note of its URL; you'll need it to construct the video tag.

Unless otherwise specified in an example style tag, the viewing area of the video examples that follow have sizes, borders, padding, and shadows according to the style specified in this website's CSS file.

The minimum `video` tag —

This is the minimum video tag. After this, we'll add stuff one attribute at a time.

<video>
<source src="https://example.com/movie.mp4" type="video/mp4">
</video>

Replace https://example.com/movie.mp4 with the URL of your MP4 video file and you're good to go.

Here it is with one of my own MP4 videos:

As you'll have noticed, the video is lacking controls. To start the video, you need to right‑click on the viewing area and select the "Show Controls", "Play", or other menu item your browser provides to get the video to play.

The `controls` attribute —

Let's give the video controls to make the user experience more friendly.

<video controls>
<source src="https://example.com/movie.mp4" type="video/mp4">
</video>

When the controls attribute (no value, just the attribute name) is added to the video tag, the video has controls available.

Different browsers will provide differently formatted controls. This is how your browser formats them.

The `autoplay` attribute —

The video may start playing automatically as soon as it is loaded in a browser window.

<video autoplay controls>
<source src="https://example.com/movie.mp4" type="video/mp4">
</video>

When the autoplay attribute is added to the video tag, the video will start playing immediately after it's loaded.

I won't provide a live example of the autoplay attribute because I don't want the video to start playing for everybody every time they load this web page. It could be annoying.

The `muted` attribute —

The volume of the video may be muted until the user adjusts it.

<video muted autoplay controls>
<source src="https://example.com/movie.mp4" type="video/mp4">
</video>

When the muted attribute is added to the video tag, the volume will be muted. However, the user can adjust the volume (assuming the controls attribute is specified or the user knows to right‑click).

Here is a live example of a video tag with the muted attribute (but without the autoplay attribute).

The `poster` attribute —

An image may be specified to show within the video area, on top of the video, before the video starts to play.

(So far, the video tag code in the code boxes on this page have kept each attribute as it was introduced. From this point on, the muted and autoplay attributes will be absent.)

Here is the code box for the poster attribute in the video tag.

<video poster="https://example.com/image.jpg" controls>
<source src="https://example.com/movie.mp4" type="video/mp4">
</video>

Replace https://example.com/image.jpg with the URL of an image to represent the video before the video begins playing.

Here is an example with a poster image.

Viewing area dimensions —

The video will play within the viewing area of the video tag.

That viewing area can be sized with the width and height attributes (as width="500" height="300" for examples) or with the style attribute.

I almost always use the style attribute. Thus, the examples will be with style.

Here is code to make the width of viewing area take up 75% of the available horizontal space and automatically calculate the height.

<video style="width:70%; height:auto;" poster="https://example.com/image.jpg" controls>
<source src="https://example.com/movie.mp4" type="video/mp4">
</video>

Here is an example of the result.

The height and width of the viewing area may have a different proportion than the video itself. In that case, the video will keep its proportion and adjust its size to fit within the viewing area.

Here is code for a square viewing area.

<video style="width:300px; height:300px;" poster="https://example.com/image.jpg" controls>
<source src="https://example.com/movie.mp4" type="video/mp4">
</video>

You'll notice that the video keeps its dimension proportion while playing within the viewing area.

The viewing area may be styled with inline CSS the same way a div may be styled. There may be borders, shadows, and so forth.

Going Live

Going live is simply putting the working video tag on a live web page. It serves your video from your website without interacting with an external video depository or delivery service.

Your Videos Published On Your Website lists other articles related to publishing videos with the video tag.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.