How to embed a Video in HTML
IONOS editorial team6 mins
Integrating audio-visual content into your page is a great way to attract attention to your website in more ways than one; not only is it an effective way to draw in and entertain visitors, but the appeal of multimedia content is also recognised and used as a ranking factor by all major search engines. Videos in particular enable website operators to create a varied and informative experience for their visitors. Furthermore, products and services can be displayed in more detail through videos than with texts and images alone. However, getting your chosen video on your site can be time-consuming and difficult to boot. In order to view multimedia content, customers need to have the most up-to-date version of the correct browser plugin manually installed on their device; this can often lead to incompatibilities and security problems. Website operators are also confronted with complicated embed codes, which sometimes pose difficulties when converting videos into the right format (e.g. SWF). All this could soon be a thing of the past, however; with the launch of its fifth version, hypertext mark-up language (better known as HTML) introduced a native element that can integrate videos in the website code as full-fledged web content. Alternatively, you can embed videos with Vimeo, YouTube, and other online video hosting services. Read on to discover how.
- Free website protection with SSL Wildcard included
- Free private registration for greater privacy
- Free 2 GB email account
Make embedding videos easy with HTML5
With HTML5, embedding videos on your website is child’s play. You just need the native element, video, which can be extended with optional attributes. The following example shows how you can add video resources to your website’s source code:
<video src="example.mp4" width=320 height=240 controls poster="thumbnail.jpg">
This video cannot be played in your current browser.<br>
View the download version at <a href="URL">Link address</a>.
</video>The video element we’ve shown here includes the URL to the video resource (src="example.mp4"), as well as the optional attributes, width, height, controls, and poster, which define exactly how the video should be displayed on the website. The text that appears between the first and the final tags of the element will only be shown if the browser cannot display the video. Website operators generally use these functions to give an alternative description or a download link to the resource.
HTML5 video element: the optional attributes
If a resource is embedded with a video element, a link must be included to the resource either as an src attribute or in the sub-element, source. The video element can be extended with the following attributes:
| Attribute | Function |
|---|---|
| width/height | The attributes width and height enable website operators to define the dimensions of their video explicitly. If the size is not specified, the video element uses the information in the video data. If you just use one of the two attributes, the browser will automatically adjust the aspect ratio. |
| controls | You can activate the native control bar of the web browser using the controls attribute. Alternatively, use JavaScript to define your own controls. |
| poster | The poster attribute refers to the graphics file that is to be used as the video’s thumbnail. If this attribute is not specified, the first frame of the video is used for the preview. |
| autoplay | The autoplay attribute indicates to the web browser that the video should start playing automatically upon loading the page. |
| loop | Use the loop attribute to play the video in a continuous loop. |
| muted | With the muted attribute, you can set the video to mute. |
| preload | The preload attribute tells the browser how the video file should be preloaded. There are three values to determine here: with the standard value, auto, the whole file is normally loaded, while a video element with the preload value, metadata, only preloads metadata and the value, none, prevents the video data from being preloaded. |
Browser without HTML5 support
The newest versions of the most common web browsers all support HTML5. However, you can also use text links within the video element. These appear within the alternate text and direct users to a separate download file of the video, making the content accessible for users who don’t have the most up-to-date software. These users can then download the file and watch the video on a local media player.
HTML5 codecs in a state of chaos
The HTML5 specification defines the video element and the related application programming interface (API), however, it doesn’t provide specifications for video coding. Choosing a video format therefore poses problems. All the common video formats, including WebM, OggTheora and H.264/MPEG4 each have their own advantages and disadvantages. Because of this, the leading web browsers have still not agreed upon a universal standard. Internet Explorer and Safari primarily use the H.264/MPEG4 format, which is liable to charges for the manufacturer. This format has been available almost everywhere since 2013. However, Firefox, Chrome, and Opera support free formats such as Ogg Theora, and WebM.
| Browser | MP4 (MPEG4 files with H.264 video codec + AAC audio codec) | WebM (WebM files with VP8/VP9 video codec + Vorbis audio codec ) | Ogg (Ogg files with Theora video codec + Vorbis audio codec) |
|---|---|---|---|
| IE 9+ | Yes | No | No |
| Firefox | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes |
| Safari | Yes | No | No |
| Opera | Yes | Yes | Yes |
It’s a good idea to provide videos in a range of different formats in order to prevent incompatibilities. To this end, the video element allows different video resources to be embedded through the sub-element, source, and tagged with the type attribute for the web browser:
<video width=320 height=240 controls poster="thumbnail.jpg">
<source src="example.webm" type="video/webm">
<source src="example.ogg" type="video/ogg">
<source src="example.mp4" type="video/mp4">
</video>If an alternative source element with corresponding typ attribute is embedded in the video element, a browser will automatically choose the preferred video format upon loading the web page. Be aware that the video element can’t contain an src attribute with resources should you choose this method.
Embedding audio-visual content with video platforms
If you’d prefer to outsource the task of video hosting to an external service provider, rather than host videos from your own server, it’s possible to embed videos via Vimeo, YouTube, and other such video hosting platforms. These sites enable users to upload their own videos and generate an embed code to integrate the clips into their website.
Popular video platforms ensure that your content is compatible with the current versions of major web browsers, meaning the majority of devices support these formats. Another advantage of outsourcing video clips is that the server is not over-burdened by streaming. However, it’s important for website operators to read over the video hosting platform’s terms of use and adjust the embed code to their own website’s standards.
For example, if you want to embed a YouTube video, you need to access the video on the platform and take the code from the embed menu. You can also adjust the core settings, including defining the video’s dimensions, activating control elements, and changing the video title. In order to prevent unwanted content from appearing on your page, you should deactivate the suggested video function for recommended videos. If you don’t do this, a different video with related keywords will play in the embedded player; in the worst case, this could be the video of a direct competitor.
