What are the best practices for video embedding on websites?

There are several ways to embed a video on a website, depending on the format of the video and the platform you're using to host it.

General recommendation

HTML5 video tag: This is the most basic method of embedding a video on a website, especially for mp4. You can use the <video> tag to specify the source of the video, along with other attributes such as width and height. Example:
<video width="960" height="540" controls>
<source src="your-video-file.mp4" type="video/mp4">
</video>

Ready-to-use iframe embed codes

To embed a video to a website, you can use the HTML "iframe" tag. Here are the steps:

1. Locate the video you want to embed on a video hosting platform such as YouTube, Vimeo
2. Click on the "Share" or "Embed" button on the video page.
3. Copy the embed code that is provided. This code will typically start with “<iframe src=".
4. Open the HTML editor for the page where you want to embed the video.
5. Paste the embed code into the appropriate location on the page.
6. Save the changes to the page and preview it to ensure that the video is embedded correctly.

Personalizing sizes

When designing a webpage that is specifically targeted to desktop, it may be beneficial to use a fixed size for the video player that is close to the full width of the content area. This will ensure that the video does not appear stretched or distorted. It's recommended to use dimensions that are divisors of 1920x1080 (960x540, 1280x720, 640x360) as these resolutions will not require stretching of the pixels in the video player. Add width and height attributes to your iframe properties <iframe width="960" height="540" src="…

How to use viewport to distinguish desktop and mobile browsers for video tag?

To use the viewport to distinguish between desktop and mobile browsers for a video tag, you can use media queries in CSS and JavaScript or a JavaScript library such as jQuery.
Here's an example of how you can use a media query in CSS to apply different video dimensions for mobile (responsive) and desktop devices (fixed 960x540):
<video id="my-video" class="video-js" controls preload="auto" data-setup='{"fluid": true}'>
<source src="https://example.com/video.mp4" type="video/mp4">
</video>
<style>
/* Default styles for all devices */
.video-js {
width: 100%;
}
/* Styles for desktop devices */
@media only screen and (min-width: 980px) {
.video-js {
width: 960px;
height: 540px;
}
}
</style>

If you choose to use your own video player, when possible, utilize the built-in video player capabilities of the browser, otherwise, use a JavaScript-based player.

Using a native player, such as the HTML5 video tag, can provide a smoother and more seamless experience for users as it utilizes the built-in capabilities of the browser to play the video. This approach can result in better performance, lower latency, less energy consumption and a more consistent experience across different devices and browsers.

Using a JavaScript player, on the other hand, gives you more control over the user interface and the player's behavior. This can be beneficial if you want to add custom controls, tracking or other features that are not available in the native player.

In general, if you want to ensure a smooth and consistent experience for users, it's recommended to use the native player. However, if you require additional functionality or customizations, a JavaScript player might be a better choice.

HLS (HTTP Live Streaming) is a protocol used for streaming video over the internet, it's supported natively on most modern browsers, but older ones may require a JS player.

The alternative setup using hls.js, as demonstrated below, is a good example of a fallback method that can accommodate all types of scenarios.

<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
<!-- Or if you want the latest version from the main branch -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
var videoSrc = 'https://ireplay.tv/test/blender.m3u8';
//
// First check for native browser HLS support
//
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
//
// If no native HLS support, check if HLS.js is supported
//
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
</script>


Article written by
Sylvain Corvaisier

Independent streaming and iOS engineer

Last modified: February 5th, 2025