If you need to host videos on your own website, or want greater control over that provided by YouTube, you can use the video tag to embed the video in your webpage.
In this tutorial we will take a look at how to embed a video using the video tag and what the key attributes are to modify how it works. A video of coffee being poured will be used to demonstrate the lesson and this can be found below.
So, YouTube is great for hosting your videos for free, and you can easily embed these within your website and adjust the dimensions to what you want. Indeed, this is what I do for my tutorials on WebCodeFun. You simply embed the video in your website using an iFrame, with the code provided by YouTube.
But sometimes you want – or need – to host the video yourself. Let’s take a look at how we do this.
The <video> tag is used to embed a video into your webpage.
We can add a class to the element so that we can control how it looks with CSS. Here, I add a class to determine the size of the video and to keep it centred on the webpage.
The video element needs to be told the source of the video it will be accessing. You can add a single source for the video within the video tag using the src attribute, or you can add one – or more –
Firstly, we’ll add a source to the video tag itself. We do this using the src attribute. This is telling the video element where to get our video file from. In this example, I have a video saved of some coffee, which seems apt as I live off fresh coffee nowadays. You can see that I have it saved in a folder named media.
<video class="video-section__video" src="/media/latte-art-coffee.mp4"></video>
We also need to tell the browser what file type it is, which in this case is an mp4 video. We’ll touch on this again in a moment.
<video class="video-section__video" src="/media/latte-art-coffee.mp4" type="video/mp4"></video>
Pop this on your webpage and you will see it is showing up. But you'll also see that it doesn’t play when you click it, and there are no buttons to enable us to play the video. We’ll look at how to add some controls in a minute.
Before we do that though, let’s go back and explore how else we can add the video source. You can also add one – or more – <source> tags with different video sources to the video element. The browser will then choose the first one that it supports, working down the list until it finds one.
We have an mp4 file, which works on all major browsers, but you could also add an ogg file for example:
<video class="video-section__video"> <source src="/media/latte-art-coffee.mp4" type="video/mp4"> <source src="/media/latte-art-coffee.ogg" type="video/ogg"> </video>
There are different video file types that you can use, but nowadays, it’s best to upload in mp4 or WebM format, as all the major browsers accept these formats and so it saves you having to use multiple different formats.
WebM is royalty free and has excellent compression, as it is primarily designed for being used for videos on webpages. Mp4 is the industry standard and slightly higher quality, so as with most things you have to choose your trade off, depending on what you would like to achieve.
So that’s our basic video on the webpage, but of course there are lots of attributes we can use to give it the functionality that we desire. We’ll look at the self-explanatory ones first. These boolean attributes will turn the option on by including the word.
<video class="video-section__video" src="/media/latte-art-coffee.mp4" autoplay controls loop muted></video>
With all four added into our video element, the video plays automatically, has controls, it will loop when it’s finished and it is muted, albeit there is no sound but I can assure you if it did you wouldn’t hear it.
We have two more attributes to check out before we’re done. Both are quite important.
The preload attribute specifies whether the video will be loaded with the webpage. This can be ignored by the browser, but it does give the browser your guidance on what you think will be the best user experience. It will definitely be ignored if the autoplay attribute is present.
The choices are auto, metadata and none. Auto will tell the browser to load the entire video when the page loads, metadata advises the browser to only load the metadata, whilst none tells the browser not to load the video at all.
<video class="video-section__video" src="/media/latte-art-coffee.mp4" controls preload="auto"></video>
The poster attribute is used to set an image to be shown whilst the video is downloading, and it will show until the user presses the play button. If it is not included, the first frame of the video is usually shown instead. This isn’t the case on some browsers, with a black background shown instead.
This can look a bit rubbish – in my opinion – for the user, as it doesn’t give the user any idea what the content will be. So, I would recommend using the poster attribute unless this isn’t an issue for you.
We’ll add in poster and point it to a nice picture of a coffee I downloaded.
<video class="video-section__video" src="/media/latte-art-coffee.mp4" controls preload="auto" poster="/media/latte-art-coffee.jpg"></video>
Great, that's it. This is now complete and the final version can be seen at the top of this page.