Since the HTML5 update, a native element allows you to embed videos as web content in their own right. You also have the option of outsourcing video hosting to providers such as YouTube or Vimeo. Find out how to do it here!
Create a website
Your site in a flash thanks to artificial intelligence
- Intuitive site editor with AI features
- Image and text generator with SEO optimization
- Domain, SSL and email included
Embed videos with HTML5
HTML5 makes embedding videos a breeze. All you need is a native video asset, which can be expanded with optional features. The following code shows you an example of embedding video assets into your website's source code:
html
The element video in example contains the URL of the video resource (src="https://www.ionos.fr/digitalguide/sites-internet/creation-de-sites-internet/comment-integrer-une-video-sur-votre-site-avec-html/exemple.mp4") as well as optional attributes width, height, controls And posterdefining how the video is represented on the site. The text between the intro and conclusion tag of the video element is only displayed if the browser cannot render the video. Website administrators usually use this function to offer their visitors an alternative description as well as a link to download the resource in question.
Optional attributes for HTML5 video elements
If an attribute is embedded in an element videothe latter must contain a link to the resource as an attribute src or child element source. The element video can be expanded via the attributes presented below:
| Attribute | Function |
|---|---|
width/height
|
Attributes width And height allow you to indicate the dimensions of your video. If not specified, the video element accesses information about the size of the video file. If you use only one of the two attributes, the browser will automatically adjust the aspect ratio.
|
controls
|
The attribute controls allows you to display the browser's native control bar. You can also define your own controls via JavaScript.
|
poster
|
The attribute poster allows you to reference an image file that will be displayed as a preview of the video. If this attribute is not present, the first frame of the video will be used as a preview.
|
autoplay
|
This attribute tells the browser to automatically play videos once the web page is loaded. |
loop
|
If you use the attribute loopthe video will play in a loop.
|
muted
|
The attribute muted allows you to mute the sound of the video.
|
preload
|
The attribute preload tells the browser how the video file should be preloaded. Three values are available: the standard value auto loads the whole file normally, the value preload metadata only loads the metadata in advance and the value none prevents the video file from loading automatically.
|
Note
Use text links inside the element video to provide separate download files to video, to embed videos in HTML and make this video content accessible on your website to users who use very old browser versions!
HTML5 codec support
The HTML5 specification defines the element video and the corresponding programming interface, but gives no indication of video encoding. The choice of video format can therefore pose a problem. Each common video format, whether WebM, Ogg Theora, or H.264, has advantages and disadvantages. To date, there is no standard common to all browsers. The table below summarizes video codec support by major browsers:
| Browser | H.264 (AVC) | H.265 (HEVC) | AV1 | VP9 | Ogg Theora |
|---|---|---|---|---|---|
| Edge | ✓ | ✓ | ✓ | ✗ | |
| Firefox | ✓ | ✓ | ✓* | ✓ | ✓ |
| Chromium | ✓ | ✓* | ✓ | ✓ | ✗ |
| Safari | ✓ | ✓ | ✗ | ✓* | ✗ |
| Opera | ✓ | ✓ | ✓ | ✓ | ✓ |
*partially
To avoid the incompatibilitiesso it is recommended to provide different formats when you embed a video in your website. The element video allows for this purpose to include different video resources via the child element source and mark them with the attribute type for the web browser:
html
When elements source alternatives with an attribute type appropriate are integrated into the element videothe browser automatically selects the video format it prefers when loading the page. It is important to note that, in this type of integration, the element video must not contain an attribute src with a directly informed resource.
Embed a video on a website via a video platform
If you do not want to embed a video with HTML, you can use a specialized external video host. Platforms such as YouTube and Vimeo offer the possibility of downloading video materials for free and embedding these videos into your website using embedded code.
Since video platforms ensure that your content is compatible with the most common web browsers, the formats used by these service providers are also compatible with most mobile devices. The advantage of outsourcing video clips is that your server will not see its data load increase due to video streaming. Administrators should, however, inform themselves about the conditions of use of the video hosting used beforehand and adapt the embedded code according to their own requirements.
For example, if you want to embed a YouTube video, you can load the corresponding page on YouTube and copy the embedded code into your element embedding menu. General settings can be made there to define the dimensions of the videos as well as activate a menu bar and the title of the video. To prevent extraneous content from appearing on your own page, the automatic playback function for recommended videos can be deactivated. This video platform can indeed display content from other users with similar keywords on your site's integrated player, or even display videos from direct competitors.
Create a website
Your site in a flash thanks to artificial intelligence
- Intuitive site editor with AI features
- Image and text generator with SEO optimization
- Domain, SSL and email included
