How to embed a video in HTML

Nowadays the simpliest way to embed a video in a html web page is to use the standard HTML5 video player. However, there are available more advanced options using custom video players like video.js - a powerful open source video player - or using HLS adaptive video streaming instead of progressive video. There are also other advanced possibilities to embed videos using iFrames and Oembed links.

Embed a video in plain HTML

The most straightforward approach to stream video over HTTP is to use the HTML5 video player, and a video encoded using the H264 format in a mp4 container. Then, this will be as simple as using the video element with the url in the source attribute. However, this solution does not take advantage of video bandwidth optimization using modern video codecs.

<video controls>
  <source src="video-name.mp4" type="video/mp4">
</video>

Like the HTML picture element, the video element suppports multiple sources to allow the browser to pick the best it can play. Actually, the browser is going to try loading the video source following the defined orther. So, if we transcode the video using recent standards with higher efficiency but limited browser support, we may cascade the options from the most to the least efficient. So that the browser is going to pick the best it can reproduce.

For instance, we can take a video and transcode it using the principal video codecs, providing three versions: a H265 mp4 version at the top of the list, a webm VP9 variant, and a H264 mp4 - which is universally supported - version as fallback.

<video controls>
  <source src="video-name-hevc.mp4" type="video/mp4; codecs=hevc">
  <source src="video-name.webm" type="video/webm; codecs=vp9">
  <source src="video-name.mp4" type="video/mp4">
</video>

The simplicity and safety of the HTML5 video player makes it a compelling solution to embed short videos in our web. Moreover it has a number of attributes (controls, autoplay, loop) that we can use to customize its embeded behavior.

Embed a HLS video in plain HTML

For long videos with high resolutions, streaming progressive formats may damage the quality of experience with a excesive bandwidth consume. Resulting in a reduced page speed, video stalling and rebuffering. To cope with the diversity of connections and excesive bandwidth consume, we'll need to use an adaptive video streaming protocol like HLS, to provide the best possible quality that the network allows, at any time.

In HLS video streaming, instead of a simple video file, we'll have the video transcoded in different renditions with different qualities and split in chunks. We provide the browser with a playlist -tipically with m3u8 extension- detailing the qualities available and then it chooses depending on the current network speed.

embed video hls renditions

We can still use the default HTML5 video player, but we need to add a piece of javascript - like hls.js - that checks the network speed and negotiates the quality with the server, to provide cross-browser support.

While HLS is supported natively by iOS and Android as well as by Safari in recent macOS versions, important browsers like Chrome, Edge, or Firefox don't support it and need some javascript that implements the protocol. Fortunately, there is a javascript library -hls.js- that does just this for those browsers supporting the Media Source Extensions API.

To stream HLS video with hls.js, we'll have to insert some code like this in our HTML.

<video id="player"></video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.12.4/hls.min.js"></script>
<script>
  var video = document.getElementById('player');
  if (Hls.isSupported()) {
    var hls = new Hls({ autoStartLoad: false });
    hls.attachMedia(video);
    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
      hls.loadSource('https://store.abraia.me/05bf471cbb3f9fa9ed785718e6f60e28/HLS-video/HLS_video-at-work/playlist.m3u8');
      hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
        video.play();
      });
    });
  } else {
    // fallback
  }
</script>

Embed video using video.js

While the attributes of the HTML5 video player offer some capability to control the behavior and appearance of our video, they're quite basic. If we seek to costumize the video experience for our users, we'll need a javascript viewer.

A great open source option is video.js. It brings a high degree of customization using skins and a flexible configuration, for instance allowing you to use autoplay or different video controls.

embed video html abraia videojs custom player

Video.js is able to play both progressive videos and HLS streams. Again, the use of HLS requires suport of the Media Source Extensions API, which most browsers do. The code to implement the player may be very simple as the following example shows.

<video id="player" class="video-js vjs-default-skin vjs-big-play-centered" width="100%" controls autoplay muted loop preload>
  </video>
</div>
<script src="https://vjs.zencdn.net/7.6.5/video.min.js"></script>
<script>
  const player = videojs('player', {
    responsive: true,
    fluid: true
  });
  player.src({
    src: 'https://store.abraia.me/05bf471cbb3f9fa9ed785718e6f60e28/HLS-video/HLS_video-at-work/playlist.m3u8',
    type: 'application/x-mpegURL'
  });
</script>

Interestingly, video.js also supports the tracking of video-related events (like play or pause actions) so we can include them in our own analytics. For instance, we may include the following code in our player.

player.analytics({
  defaultVideoCategory: 'Video',
  events: [{
    name: 'play',
    label: 'Video-Title',
    action: 'play',
  }, {
    name: 'pause',
    label: 'Video-Title',
    action: 'pause',
  }, {
    name: 'ended',
    label: 'Video-Title',
    action: 'ended',
  }, {
    name: 'error',
    label: 'Video-Title',
    action: 'error',
  }]
});

And we'll find the data collected on the tracked events available in our Google Analytics.

embed video analytics

Embed a video using iframes

Finally, there is still the option to decouple the visualization of the video from the HTML code of the page where we want to embed it. In this case we create an HTML resource where we have the code of the player and the url of the video. Then we insert this HTML document in the HTML code of the page where we want to embed the video.

embed video iframe oembed

If we have direct access to the code of the page we can do it using the HTML5 element iFrame with the source attribute pointing to the url the HTML to embed. For instance,

<div style="position:relative;width:100%;height:0;padding-bottom:56.25%;">
  <iframe src="https://store.abraia.me/05bf471cbb3f9fa9ed785718e6f60e28/videoExample/index.html" style="border:0;top:0;left:0;width:100%;height:100%;position:absolute;" width="1920" height="1080" allowfullscreen></iframe>
</div>

Alternatively, we can use oEmbed links to embed the video when we work in a content management system in which we don't want or cannot modify the code of the page, provided the CMS supports oEmbed.

oEmbed allows a CMS to display embedded content (such as photos or videos) just with a link to that resource, without having to parse it directly. In this case the provider of the resource should implement the oEmbed API providing a description of the resource that allows the CMS to fetch the resource. For instance,

{
  "type":"video",
  "version":"1.0",
  "provider_name":"Abraia",
  "provider_url":"https://abraia.me",
  "title":"Abraia Embed Video in HTML Demo",
  "description":"Embed video in html demo using iFrames and oEmbed links",
  "author_name":"Abraia",
  "author_url":"https://abraia.me",
  "width":"1920",
  "height":"1080",
  "html":"<div style=\"position:relative;width:100%;height:0;padding-bottom:56.25%;\"><iframe src=\"https://store.abraia.me/05bf471cbb3f9fa9ed785718e6f60e28/videoExample/index.html\" style=\"border:0;top:0;left:0;width:100%;height:100%;position:absolute;\" width=\"1920\" height=\"1080\" allowfullscreen></iframe></div>"
}

Optimize the video to embed in HTML

With Abraia you can easile convert your video to mp4 (H264 and H265) and webm (VP9), or even HLS, to directle embed in your website. We provide the whole video publishing pipeline from editing, branding, and transcoding to publishing, embedding, and viewing.

You just need to configure the required versions to automatically created all your required versions dropping your videos in the bulk tool. You will get all these video encoded versions in a single step, ready to be embeded in your web or mobile app.