Embed Video HTML: A Step-by-Step Guide

You can embed a video in an HTML document using these functions: <video>, <object>, and <embed>. Each works differently, and each uses the src attribute to point to the URL of the desired video.

When you’re creating a web page, you may decide that you want to embed a video in the document. For example, you may be writing a tutorial on how to bake a cake and include a video alongside the recipe.

There are a couple of ways to embed video in an HTML document. In this guide, we’ll cover three ways you can embed a video using these HTML functions: using <video>, using <object>, and using <embed>.

Video Tag

HTML5 includes a useful element for embedding video in web pages: <video>. While the element does not work in all modern web browsers—it is still somewhat new — the tag will work in most browsers.

The video element takes in two parameters: the source of your video and the controls you want to use. Here’s the syntax for the embed video HTML <video> tag:

<video controls="controls" src="videos/ourVideo.mp4">
	This browser does not support the video element.
</video>

In the above example, we use the src attribute to reference the video at videos/ourVideo.mp4. We also tell the browser to utilize the default set of controls that comes with it using the controls attribute. The text within our <video> tag will appear if the video cannot render on the web page.

If we wanted to include alternative sources, we could use the following code:

<video controls="controls">
	<source src="videos/ourVideo.mp4" type="video/mp4">
	<source src="videos/ourSecondVideo.mp3" type="video/mp3">
	This browser does not support the video element.
</video>

Now we’ve inserted a video on our webpage using our source element. Above, we referenced an mp4 and an mp3 resource, but you can use any standard video format in the <video> tag.

Embed Tag

Additionally, you can use the <embed> element to embed videos and other multimedia into an HTML web page. Here’s an example of an <embed> tag being used to reference an Adobe Flash video on a web page:

<embed src="videos/ourVideo.swf" width="600px" height="400px">

This code renders a Flash video on the webpage. We also used the width and height parameters to specify the size of our video player. In this case, our video player will render in the size 600×400.

However, if you are referencing a Flash resource, your video may not play. This is because users must have Flash installed and active on their system, and many users don’t.

Object Tag

We can also utilize an <object> tag to embed different types of media into an HTML web page. For example, you can use this tag to embed HTML5 video, audio, Flash resources, or PDF files into your web page. Here’s an example of the <object> element being used to embed a video onto a web page:

<object src="videos/ourVideo.mp4" width="600px" height="400px"></object>

Again, users must have Flash installed and active for the <object> tag to work. Even if you still want to use <object>, consider using the <video> element or both for users who don’t have Flash installed.

Conclusion

HTML includes three elements that allow you to embed video files into a web page: <video>, <object>, and <embed>. So, if you’re looking to add a video to a webpage, you should make use of these tags. Today, we discussed the use of these tags and their compatibility with browsers and Flash.

Now you’re equipped with the knowledge you need to embed videos on any web page!