You can embed a video in an HTML document using these functions:
<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
<object>, and using
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
<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
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
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.
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.
HTML includes three elements that allow you to embed video files into a web page:
<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!