Over a million developers have joined DZone.

HTML5 Saved the Video Star: How to Embed HTML5 Video

DZone's Guide to

HTML5 Saved the Video Star: How to Embed HTML5 Video

Need to know how to embed HTML5 video on your site with or without YouTube? Here's how.

· Web Dev Zone ·
Free Resource

Learn how to add document editing and viewing to your web app on .Net (C#), Node.JS, Java, PHP, Ruby, etc.

In this tutorial we are going to learn two options of HTML5 video embed: using YouTube and another HTML5 player. In HTML4 multimedia playback was dependent on Adobe Flash plugin. Now thanks to HTML5, you can get rid of Flash and play videos smoothly with the help of modern browsers.

The first step is to decide what type of video hosting you prefer: YouTube or your own. If you don’t want to exhaust your hosting bandwidth, then you’d better upload video files to YouTube. And use the player provided by Google streaming service. If you want to store your original content on your own server, than you can try other HTML5 players.

New YouTube HTML5-Friendly Embed

In January 2015 YouTube announced switch of its default web player to HTML5.

If you click any Share > Embed option under each video, you’ll see an iFrame embed code like this:

<iframe width="1280" height="720"

src="https://www.youtube.com/embed/e-Xb3uNK5vQ?rel=0" frameborder="0" allowfullscreen>


Here you can customize the following properties:

  • Video player size

To do it, replace the default width and height with a desired one. For example, if you need a small player, your code will look like this:

<iframe width="560" height="315"

src="https://www.youtube.com/embed/e-Xb3uNK5vQ?rel=0" frameborder="0" allowfullscreen>


  • Disable player controls

Add &controls=0 before frameborder element. Here’s an example:

<iframe width="1280" height="720"

src="https://www.youtube.com/embed/e-Xb3uNK5vQ?rel=0&controls=0" frameborder="0" allowfullscreen>


  • Video playback start time

To do it, add #t= after the URL. Like this:

<iframe width="1280" height="720"

src="https://www.youtube.com/embed/e-Xb3uNK5vQ#t=1m01s?rel=0" frameborder="0" allowfullscreen>


Browser Support:

  1. Google Chrome

  2. Mozilla Firefox

  3. Safari 8

  4. Internet Explorer 11

  5. Microsoft Edge


YouTube hosting infrastructure is a great benefit for those who are limited by server capacity. Besides, you don’t need to convert videos yourself. YouTube will take care of it. Yet, your content will be accessible for everyone.

Alternative to YouTube - HTML5 Player by Freemake

Sometimes you can’t make videos publicly available. Then you need an alternative non-YouTube HTML5 player. Take a look at HTML5 player created with Freemake Video Converter. The free software converts video files to HTML5 and automatically generates player embed code. Here’s how it looks like:

<div style="position: relative; width: 420px;">

<video id=0 controls width=420 height=240>

<source src="Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>

<source src="Wildlife.webm" type='video/webm' >

<source src="Wildlife.mp4" type='video/mp4'>

<p>Video is not visible, most likely your browser does not support HTML5 video</p>



Player Customization

With Freemake’s player you can customize video size quickly before conversion. Let’s say you want to embed a HD movie on your site. Just select the necessary HTML5 output parameters such as: same as source, 1080p or 720p or any custom dimension of your video player.

The software converts videos in 3 key HTML5-compatible formats: OGV, MP4 (H.264), WebM (VP8). Ideally you should upload all file versions to your server. If you upload only one or two version of video, it might cause issues with playback in all browsers.

Browser Support:

  1. Chrome 6.0 and higher

  2. Mozilla Firefox 4.0 and higher

  3. Safari 3.1 and higher

  4. Internet Explorer 9 and higher

  5. Microsoft Edge


Freemake HTML5 player guarantees the correct video file format and playback in older browsers. But it doesn’t let to tweak video controls or player color.

So which HTML5 player would you choose?

Extend your web service functionality with docx, xlsx and pptx editing. Check out ONLYOFFICE document editors for integration.

html 5 ,html5 ,html ,web dev ,video ,youtube

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}