Since HTML5, there is a native element that allows you to embed videos as full-fledged web content. Alternatively, you can outsource video hosting to providers like YouTube or Vimeo. We’ll show you how it works.

Website Builder
From idea to website in record time with AI
  • Intuitive website builder with AI assistance
  • Create captivating images and texts in seconds
  • Domain, SSL and email included

How to embed video easily using HTML5

HTML5 makes embedding video HTML a breeze. All you need is the native video element, which can be extended with optional attributes. How to add video resources to your website’s source code is shown in the following code example:

<video src="example.mp4" width="320" height="240" controls poster="preview-image.jpg">
    <p>This video cannot be played in your browser.<br>
    A downloadable version is available at <a href="URL">link address</a>.</p>
</video>
html

The video element in the example includes the URL to the video resource (src="example.mp4") as well as the optional attributes width, height, controls, and poster, which define how the video is displayed on the website. Text between the opening and closing tags of the video element is shown only if a browser cannot display the video. Website operators usually use this function to offer an alternative description and a download link to the resource.

Optional attributes of the HTML5 video element

When a resource is embedded via the video element, it must include the link to the resource either as a src attribute or in a child element source. Additionally, the video element can be extended with the following attributes:

Attribute Function
width/height The width and height attributes allow you to specify the dimensions of your video. If not provided, the video element uses the size information from the video file. If you use only one of the attributes, the browser automatically adjusts the aspect ratio.
controls The controls attribute enables the browser’s native control bar. Alternatively, custom controls can be defined via JavaScript.
poster The poster attribute allows you to reference an image file to be displayed as a preview image for the video. If this attribute is missing, the first frame of the video is used for the preview.
autoplay The autoplay attribute instructs the browser to automatically start videos after the website loads.
loop Using the loop attribute, the video will play continuously on a loop.
muted The muted attribute mutes the audio of the video.
preload The preload attribute provides the browser with a suggestion on how to preload the video file. You have three options: the default value auto usually loads the entire file, metadata loads only metadata, and none prevents preloading of video data.
Note

Provide separate download files for the video via text links within the video element to embed video HTML and make these video contents accessible on your website for users who work with very old browser versions!

HTML5 codec support

The HTML5 specification defines the video element and its application programming interface, but does not specify video encoding. This leaves website operators with challenges when choosing the video format. Each popular video format, such as WebM, Ogg Theora, or H.264, has its advantages and disadvantages. As of now, there is no universal, cross-browser standard. The following table summarizes the video codec support of the major browsers:

Browser H.264 (AVC) H.265 (HEVC) AV1 VP9 Ogg Theora
Edge
Firefox *
Chrome *
Safari *
Opera

*only partially

To prevent incompatibilities, it is advisable for this reason to provide different formats when you embed a video on your website. The video element allows for embedding various video resources using the source child element, and marking them with the type attribute for the web browser:

<video width="320" height="240" controls poster="preview-image.jpg">
    <source src="example-av1.webm" type="video/webm; codecs=av01.0.05M.08">
    <source src="example-vp9.webm" type="video/webm; codecs=vp9">
    <source src="example.mp4" type="video/mp4; codecs=avc1.42E01E">
    Your browser does not support the video tag.
</video>
html

If alternative source elements with the corresponding type attribute are included in the video element, a browser automatically selects the preferred video format when building the website. It is important to note that the video element must not contain a src attribute with a resource for this kind of video embedding.

How to embed a video on a website via video platform

If you do not want to embed videos via HTML, but prefer to outsource video hosting to an external provider, you can use platforms like YouTube and Vimeo to upload video content for free and integrate clips into your own website using an embed code.

As popular video platforms ensure that their content is compatible with all major browsers, the formats of these providers are supported on most devices. Outsourcing video clips also has the advantage that your own server is not additionally burdened by streaming. However, you should inform yourself in advance about the terms of use of the video hosting and adjust the embed code to meet your own requirements.

For example, if you want to embed a YouTube video, access the specific clip on the platform and retrieve the code from the embedding menu. Here, you can also make key settings to define the video’s dimensions and activate controls and the video title. To prevent foreign content from appearing on your site, it is also recommended to disable the preview function for alternative videos. Otherwise, the video platform may present content from other users in the embedded player that have been assigned similar keywords—in the worst case, videos from a direct competitor.

Website Builder
From idea to website in record time with AI
  • Intuitive website builder with AI assistance
  • Create captivating images and texts in seconds
  • Domain, SSL and email included
Was this article helpful?
Go to Main Menu