Embed videos into your website with HTML5

Gaspar
Posted by
Senior Developer

In modern browsers, adding a video to your page is as easy as adding an image. No more special plugins, no more crazy markup. You can do it with a single element. In this post, we show you how to embed videos into your site with HTML5.

About <iframe>

You simply use the <iframe> tag. This specifies an inline frame, which contains an independent HTML. With this frame, you can embed a form, a webpage or a video from an external URL. It’s primarily used to include resources from other domains or subdomains, but can also include content from the same domain. The <iframe>’s strength is that the embedded code is ‘live’ and can communicate with the parent document. The content for the document is referenced in the src attribute of each element, so it is actually a fully independent resource being referenced from the current document.

Example markup:

<iframe id=”player” type=”text/html” width=”640″ height=”390″ src=”http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com” frameborder=”0″></iframe>

Introduction to HTML5 <video> tag

The <video> element is new in HTML5. The data of this element is supposed to be video but it can also have audio or images associated with it.

It works in all modern browsers (IE9 and above). In HTML5, there are three supported video formats: MP4, WebM, and Ogg.

Example markup:

Simple markup: <video src=”video.webm” controls></video>

You can specify multiple source files by using the <source> element and you can specify multiple formats as a fallback in case the user’s browser doesn’t support one of them. For example:

<video controls> <source src=”media/demo.mp4″ type=”video/mp4″> <source src=”media/demo.ogv” type=”video/ogg”> <source src=”media/demo.webm” type=”video/webm”> <p>Your browser doesn’t support HTML5 video.</p> </video>

How it works

The ‘controls’ attribute adds video controls such as play, pause, and volume. The <source> element allows you to specify alternative video files that the browser can choose from. The browser will use the first recognised format. The text between the <video> and </video> tags will be displayed only in browsers that do not support the <video> element.

HTML5 <video> and <iframe> comparison

You don’t choose between the HTML5 video element <video> and an <iframe> as they do different things. But what if you want to achieve the same front-end results? For example, creating a full screen video background for your page?

With the video element, your browser can play a video natively, as opposed to a plugin such as Flash. An iframe allows you to load the source of another URL into your page. Because the iframe loads from external sources, such as Vimeo or YouTube, you can’t easily handle them, and the page will load slowly.

We created a test for each version as a demonstration – we kept the content the same and the only difference was in the <iframe> and <video> tags. You can see the results below.

<iframe>

iframe WordPress

Result: 15 requests : 3.39s

<video>

Video iframe WordPress

Result: 4 requests : 0.55s

The <iframe> supports the video URL from YouTube or Vimeo; the HTML5 <video> allows only MP4, WebM and Ogg formats. So, for this, you have to convert the video URL to this format. You can find a couple of free online tools; the MP4 format is supported by browsers.

The <iframe> allows you to add query arguments to the video URL for autoplay, mute, loop, etc. Your URL looks something like this: https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com%22%20frameborder=%220%22.

The HTML5 <video> tag accepts the following attributes:

AttributeValueDescription
autoplayautoplaySpecifies that the video will start playing as soon as it is ready
controlscontrolsSpecifies that video controls should be displayed (such as a play/pause button etc)
heightpixelsSets the height of the video player
looploopSpecifies that the video will start over again, every time it is finished
mutedmutedSpecifies that the audio output of the video should be muted
posterURLSpecifies an image to be shown while the video is downloading, or until the user hits the play button
preloadauto metadata noneSpecifies if and how the author thinks the video should be loaded when the page loads
srcURLSpecifies the URL of the video file
widthpixelsSets the width of the video player

Source: http://www.w3schools.com/TAGS/tag_video.asp

You should note that the autoplay attribute on the HTML5 <video> tag doesn’t work on mobile devices such as the iPad and iPhone.

“Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations. In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.” Apple Documentation

Here is a separate warning featured on the Safari HTML5 Reference page that explains why embedded media cannot be played in Safari on iOS:

“Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback is initiated, but for iPad you must either set the controls attribute or provide a controller using JavaScript.”

We hope that you found this post useful; good luck with embedding videos into your website!

Let's connect

  • Have you got a web development project you need help with? Get in touch.
  • Subscribe and get our latest news and insights delivered directly to your inbox!
Gaspar
posted by
Gaspar Nemes
Senior Developer

Gaspar is putting his BSc in Computer Science to very good use building beautiful and blisteringly fast websites for our clients including Sony Mobile. Gaspar is full-stack but especially enjoys front-end work building pixel perfect sites for our clients.

all articles by Gaspar