Audiovisual content attracts attention and not only pleases the visitors to your website. The search engines also reward the added value that multimedia content offers. Videos, in particular, enable you to make information offers more varied. In addition, products and services can be presented in more detail with videos than with texts and images alone. However, delivering YouTube video content on websites has long been considered difficult.
In order to display multimedia content, appropriate browser plug-ins (e.g. Adobe Flash Player) had to be installed manually on the end device and updated regularly, which often resulted in incompatibilities and security gaps. Providers were also confronted with complicated embed codes and sometimes struggled to convert videos into the appropriate formats (e.g. SWF). But these additional technologies could soon be history. Since the fifth version, the Hypertext Markup Language (HTML for short) has been offering a native element with which videos can be integrated into the website code as full web content . Alternatively, you have the option of outsourcing YouTube video hosting to providers such as YouTube or Vimeo. We'll show you how it works.
HTML5 video integration made easy
HTML5 makes embedding videos child's play. All you need is the native element video , which can be expanded with optional attributes. The following code example shows how to add video resources to the source code of your website.
The YouTube video element in the example contains the URL to the YouTube Embed Code resource ( src = " example.mp4 ") and the optional width , height, controls and poster attributes that define how the YouTube Embed Code will be displayed on the website. Text that appears between the introductory and the closing tag of the YouTube Embed Code element is only displayed if a browser cannot display the YouTube Embed Code. Website operators usually use this function to offer an alternative description and a download link to the resource.
Optional attributes of the HTML5 YouTube video element
If a resource on the YouTube video element involved, this must be the link to the resource as either src - attribute or a child element source included. In addition, the YouTube video element can be expanded to include the following attributes:
width / height
The width and height attributes allow you to explicitly specify the dimensions of your YouTube video. If this information is missing, the YouTube video element accesses the size information of the YouTube Embed Code file. If you only use one of the two attributes, the displaying browser automatically adjusts the aspect ratio.
The poster attribute you use to refer to a graphic file to be displayed as a preview for the video. If this attribute is missing, the first frame of the YouTube Embed Code is used for the preview.
With the autoplay attribute you instruct the web browser to start videos automatically after the website has been created.
If you use the loop attribute, the video will be played in a continuous loop.
Use the muted attribute to mute the YouTube Embed Code's sound.
The preload attribute gives the browser a recommendation on how the YouTube Embed Code file should be preloaded when downloading the website. There are three values available: the default value auto normally loads the entire file, a video element with the preload value metadata only preloads metadata and the value none prevents the preload of video data.
Browser without HTML5 support
Current versions of the most popular web browsers support HTML5. In order to make video content on your website accessible to those users who are technically not up to date, text links within the video element allow you to offer separate download files for the YouTube Embed Code. If you get the alternative text instead of the YouTube Embed Code, you have the choice of downloading the YouTube Embed Code and viewing it in a local media player.
The HTML5 Codec Chaos
The HTML5 specification defines the video element and the associated application programming interface (API), but does not make any specifications for video coding . The choice of video format therefore poses problems for website operators. Each of the popular video formats WebM , OggTheora and H.264 / MPEG4 have advantages and disadvantages. And so the manufacturers of market-leading web browsers have not yet been able to agree on a common standard. While Internet Explorer and Safari primarily use the H.264 / MPEG4 format, which is subject to a fee for the manufacturerset, a format that has been available almost everywhere since 2013, the web browsers Firefox, Chrome and Opera also support free formats such as Ogg Theora and WebM .
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)
In order to prevent incompatibilities, it is advisable to provide videos in different formats. The video element allows for this purpose, various video resources by the child element source to integrate with the type excel attribute for the Web browser.
If alternative source elements with the corresponding type attribute are included in the video element, a browser automatically selects the preferred video format when the website is set up. It should be noted that with this type of video embedding , the video element must not contain an src attribute with a resource.
Integrate audiovisual content via video platforms
If you don't want to provide videos via your own server, but want to outsource the video hosting to an external service provider, platforms such as YouTube and Vimeo have the option of uploading video material free of charge and integrating clips into your own website using an embed code .
For example, if you want to embed a YouTube video, call up the relevant clip on the platform and take the code from the embedding menu. Central settings can also be made here to define the dimensions of the YouTube Embed Code and to activate controls and video titles. To prevent third-party content from appearing on your own page, it is also advisable to deactivate the preview function for alternative videos. Otherwise, the YouTube Embed Code platform will present content from other users in the integrated player who have been assigned similar keywords - in the worst case, videos from a direct competitor.