# How does embedding videos with HTML work?

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.

## 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:

```html
<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>
```

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:

<table>
  <thead>
    <tr>
      <th>Attribute</th>
      <th>Function</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>`width`/`height`</td>
      <td>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.</td>
    </tr>
    <tr>
      <td>`controls`</td>
      <td>The `controls` attribute enables the browser’s native control bar. Alternatively, custom controls can be defined via JavaScript.</td>
    </tr>
    <tr>
      <td>`poster`</td>
      <td>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.</td>
    </tr>
    <tr>
      <td>`autoplay`</td>
      <td>The `autoplay` attribute instructs the browser to automatically start videos after the website loads.</td>
    </tr>
    <tr>
      <td>`loop`</td>
      <td>Using the `loop` attribute, the video will play continuously on a loop.</td>
    </tr>
    <tr>
      <td>`muted`</td>
      <td>The `muted` attribute mutes the audio of the video.</td>
    </tr>
    <tr>
      <td>`preload`</td>
      <td>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.</td>
    </tr>
  </tbody>
</table>

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](https://www.ionos.co.uk/digitalguide/websites/web-development/what-is-an-api/), but does **not specify video encoding**. This leaves website operators with challenges when choosing the video format. Each popular video format, such as [WebM](https://www.ionos.co.uk/digitalguide/websites/website-creation/webm/), Ogg Theora, or H.264, has its advantages and disadvantages. As of now, there is no universal, cross-browser standard. The following table summarises the video codec support of the major browsers:

<table>
  <thead>
    <tr>
      <th>Browser</th>
      <th>H.264 (AVC)</th>
      <th>H.265 (HEVC)</th>
      <th>AV1</th>
      <th>VP9</th>
      <th>Ogg Theora</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Edge</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Firefox</td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Chrome</td>
      <td></td>
      <td>\*</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Safari</td>
      <td></td>
      <td></td>
      <td></td>
      <td>\*</td>
      <td></td>
    </tr>
    <tr>
      <td>Opera</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

\*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:

```html
<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>
```

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](https://www.ionos.co.uk/digitalguide/online-marketing/online-sales/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](https://www.ionos.co.uk/digitalguide/startup/grow-your-business/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.


This is a markdown version of: [https://www.ionos.co.uk/digitalguide/websites/website-creation/how-to-embed-a-video-with-html/](https://www.ionos.co.uk/digitalguide/websites/website-creation/how-to-embed-a-video-with-html/) for AI/LLM consumption.