Table of Contents |
Video files are a great way to add motion and life to a website. Videos can be embedded in the background, as the header background, or as stand-alone videos embedded in the site’s content.
EXAMPLE
Videos are embedded within a site using the HTML <video> parent tag surrounding a <source> child tag.<video>
<source src="movie.mp4">
</video>
CSS can also be used to embed images into the backgrounds of other elements. In this lesson, you will learn how to embed videos using the <video> tag as well as the different attributes and settings that can be applied.
HTML Video Tag <video>
An HTML tag used to embed a video file within a webpage.
Source Tag <source>
A child tag of the <video> and <audio> tags that specifies one or more options for a file source.
The <video> tag was introduced with HTML5 and provided a wide range of support for different video formats and controls. The <video> tag itself can be used as a self-closing tag when there is only one video file available. However, when there are multiple versions of the same file, such as different file formats, then you can use one <source> tag nested within the <video> tag for each video file available. This method allows for fallback options in the event that one or more of the file formats are not compatible with a user’s system.
EXAMPLE
The <source> tag is nested within the <video> tag to provide the “src” attribute, which points to the video file, and the “type” attribute, which specifies the video file format.<video width="320" height="240" src="movie.mp4" type="video/mp4" />
EXAMPLE
You can provide multiple <source> tags that point to different video files, just in case one file is not compatible with a visitor’s system.<video width="320" height="240">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
Your browser does not support video playback.
</video>
In the example above, we create a video container that is 320 pixels by 240 pixels and links to three video files. The browser will select and attempt to load the first source tag. If the browser cannot play the file (either a much older computer system or a security restriction in a corporate environment), it will load the next, and if not, then the next. If a browser cannot play any of the video formats, it will default to showing the text contained within the </video> tag.
The <video> tag includes the height and width attributes that control the overall size of the video player. Additional tags include the following:
| Attribute Name | Type/Values | Description | Example |
|---|---|---|---|
| controls | keyword | This enables media controls, including volume, play, and pause. |
<video height="240" width="320" controls> <source src="media/video1.mp4" type="video/mp4"> Your browser does not support this video type. </video> |
| autoplay | keyword | This determines if the video will automatically start playing when it loads. | <video height="240" width="320" autoplay> |
| loop | keyword | This determines if the video will repeat endlessly or play once. | <video height="240" width="320" loop> |
| muted | keyword | This determines if the video begins muted. | <video height="240" width="320" muted> |
| poster | value | The poster attribute allows you to link to a placeholder image while the video loads. The value you provide to the poster attribute should point to an image file. | <video height="240" width="320" poster="images/videoposter.gif"> |
| preload | auto, metadata, none |
This setting allows the author to control when the video should be loaded. Videos can cause a delay in loading a website, so it may be beneficial to allow the video to load after the page. If the video is the center of attention, then maybe it should load as soon as possible or with the page contents.
Auto is used if the browser should load the entire video when the page loads. Metadata is used if the browser should load only metadata when the page loads. None is used if the browser should NOT load the video when the page loads. |
<video height="240" width="320" preload="auto"> |
Do not forget about accessibility and search engine optimization. You can learn about the concerns and problems with media accessibility as well as how to make video and audio media accessible here from the Mozilla Developer Network. This includes making the media controls accessible (creating your own in place of the browser’s native media controls, which are not always keyboard accessible), creating audio descriptions for important visual elements, creating closed or open captions, and more.
Another thing to keep in mind is UI/UX considerations with regard to configuring how your video behaves and what control the user has over them. For example, many people have had the experience of visiting a website, and then all of a sudden they hear a loud video playing somewhere on the page and likely not within the current view. Not including controls on a video would prevent users from being able to control the video at all. This could become frustrating or annoying to users, especially if the video is an ad, is not relevant, or is just not something the user wants to see or has to listen to. Autoplay is another feature that can have a negative impact on your user’s experience . . . or, worse, autoplay with no controls!
Make sure that if your video is not critical and contains sound (and possibly even if it is a critical element), you give users control over the video, and if you use autoplay, consider using the muted option as well (unless the video’s audio contains critical information for the user).
Video files can come in a wide range of formats. The following are the most compatible video file formats that most video editing software can produce.
| File Type | Description |
|---|---|
| mp4 (MPEG-4) | MPEG-4 (Moving Picture Expert Group), commonly referred to as mp4, video files provide an effective container for audio and video without large file sizes. The mp4 format is also ideal for websites and web streaming. Mp4 is not an open format and requires paid software to create. |
| WEBM | webm is one of the newer formats that provides a higher compression rate than mp4 but at the potential cost of quality. Webm has become commonplace on media sites because of their smaller file size, compatibility, and quality. Webm is royalty-free. |
| OGG | The ogg format is an open, royalty-free format that provides higher-quality video and audio for website use and streaming. An interesting factor is that the ogg format is not only a container for other video format types, but it also provides a wrapper that improves compression and compatibility. NOTE: Safari partially supports ogg, and Internet Explorer does not support the ogg format. ogg is a lossy format. |
Video formats today are all fairly similar in quality and compatibility with only slight variations compared to each other. Choosing the correct format comes down to what is important.
MPEG
Established by the ISO and IEC, the Moving Picture Expert Group (MPEG) is an alliance of work groups dedicated to the compression coding of audio, video, graphics, and genomic data, as well as the transmission and file formats for various media applications.
WEBM
A video format that provides a higher compression rate than mp4 but at the potential cost of quality.
OGG
An open and free implementation of a media container file that can contain various types of media ideal for the web and online use.
Not all developers have access to the software needed or possess a familiarity with formats and format settings to create a video file that will work well within a website. Additionally, when a site needs to have a large number of videos, managing files and formats can become a significant burden. As such, there are options available for embedding videos that can remove these challenges and add additional convenience to including videos within a website.
Media hosting services are cloud-based services that are designed to host media files for use either within the service itself or for use within a website. Additionally, such services also include tools and features for managing access to the media files such as access permissions and playlists, download permissions, and embed or sharing options. The other major benefit to most media hosting services is the fact that once uploaded to the service, the video file will be automatically optimized to the best format for streaming online. This can remove a significant amount of work for developers or website owners.
The most popular media hosting service is YouTube, due to the fact that it is well known, free, and easy to use. Once you have set up an account on YouTube, you can create a channel for the account and begin uploading videos. Once the video has been uploaded using the “Create Video” interface, you can edit the details about the video, access and sharing permissions, title, description, keywords, etc. The video is then converted by YouTube into the best format. To then embed your video into your website, you will need to copy the “embed code” provided to you under the “Share” options after customizing the behaviors such as autoplay, loop, mute, and controls. You may notice that the YouTube embed code does not use the HTML5 <video> tag, but instead it uses an <iframe> tag.
The <iframe> tag has been around longer and is what YouTube designed their hosting and streaming service to use.
EXAMPLE
Instead of the <video> and <source> tags, you will use the <iframe> tag and its HTML attributes to point to the video source and configure its behaviors.<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/7hpL-hE_-10?si=24Us8tyrYA9sGBuE"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share"
allowfullscreen >
</iframe>
The good news for developers like you is that YouTube generates the embed code for you; however, you can easily see the different HTML attributes used to set the dimensions, source, title, and frame border and set the allowed features.
Another benefit to YouTube is its copyright detection tools that automatically analyze any uploaded video for copyright violations. This is a good thing because once you upload your own video to YouTube, your video is protected by YouTube and will prevent anyone else from downloading and reuploading the file as their own.
One possible drawback to using free media hosting services is the inclusion of ads within the video. The service does not permanently embed ads directly into the video file but can include ad placements just prior to the video playing or will pause the video somewhere in the middle to show an ad. Some services may allow video owners to opt out of advertisements, while others require a paid account in order to remove ads. However, most paid media hosting services (other than YouTube) do not include advertisements at all. Vimeo is a popular alternative platform many businesses use. Its business model operates by providing subscription plans to host their videos ad-free.
Beyond YouTube, there is no shortage of media hosting options available today. If all you need is to simplify the process of getting your videos into a website for ease and convenience, then almost any service will work great and you should not have to pay for much. However, if your goals are more than just hosting the videos, that is, if you want to create playlists, share via social media, use analytics, create chapters and annotations, etc., then you will want to choose a hosting service that includes the specific features as every media hosting service is different. Make sure to conduct reviews and comparisons of different media hosting services.
You can also find comparison reviews about most types of services and products. Locate an article wherein the author compares the top choices for the service or product, and you will often find the pros and cons as well as a comparison of a list of features from each option.
Another option to find different services is to think of a service that you already use that is similar to what you want, and use the following site to explore alternatives. alternativeto.net/ is a site that can suggest alternative services based on your search. For example, if you search for “YouTube,” the site will show you a list of different media service providers.
View the following video for more on adding video tags in HTML:
Media Hosting Services
Cloud-based services that are designed to host media files for use either within the service itself or within a website.
Embed Code
HTML code provided by media hosting services that allow you to embed the media asset into your website and stream it from the media service provider.
Source: This Tutorial has been adapted from "The Missing Link: An Introduction to Web Development and Programming " by Michael Mendez. Access for free at https://open.umn.edu/opentextbooks/textbooks/the-missing-link-an-introduction-to-web-development-and-programming. License: Creative Commons attribution: CC BY-NC-SA.
