Adding video to a web page used to be relatively challenging because web browsers lacked a consistent standard for embedding video files.
This chapter explores various methods of integrating videos into web pages, ranging from the latest HTML5 <video> element to embedding popular YouTube videos.
The HTML5 <video> element, a recent addition, offers a standardized way to embed video in web pages. While relatively new, it functions across most modern web browsers.
The following example demonstrates inserting a video into an HTML document using the browser's default controls, with a single source specified by the src attribute.
<video controls="controls" src="media/shuttle.mp4">
Your browser does not support the HTML5 Video element.
</video>A video, using the browser's default controls, with alternative sources.
<video controls="controls">
<source src="media/shuttle.mp4" type="video/mp4">
<source src="media/shuttle.ogv" type="video/ogg">
Your browser does not support the HTML5 Video element.
</video>The <object> element serves to embed various media files into an HTML document. Initially designed for ActiveX controls, it now accommodates any media object such as video, audio, PDF files, Flash animations, or even images.
The following code embeds a Flash video into a web page.
<object data="media/blur.swf" width="400px" height="200px"></object>This video will only play on browsers or applications that support Flash.
Warning: The <object> element lacks broad support and its compatibility depends on the embedded object type. Alternative methods could be a better choice in many cases. iPad and iPhone devices cannot display Flash videos.
The <embed> element is utilized for embedding multimedia content into an HTML document.
The following code snippet embeds a Flash video into a web page:
<embed src="media/blur.swf" width="400px" height="200px">Warning: However, while the <embed> element is widely supported in current web browsers and is also defined as standard in HTML5, your video might not play due to lack of browser support for Flash or unavailability of plugins.
This is the simplest and most popular method for embedding video files in web pages. Simply upload the video to YouTube and insert HTML code to display the video on your web page.
Here's a live example followed by an explanation of the whole process:
Go to YouTube's upload video page and follow the instructions to upload your video.
When you open your uploaded video on YouTube, you will see something like the below figure at the bottom of the video. Browse and open your uploaded video on YouTube. Now look for the share button located just below the video as shown in the figure.
Clicking the share button opens a share panel displaying additional buttons. Now click on the Embed button; it will generate the HTML code to directly embed the video into web pages. Simply copy and paste that code into your HTML document where you want to display the video, and you're all set. By default, the video is embedded inside an iframe.
You can also customize this embed code, such as changing the video size, by selecting the customization option given just below the embed code input box.
The below example simply embeds a video from YouTube. Let's give it a try:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YouTube Video</title>
</head>
<body>
<iframe width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</body>
</html>