Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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 build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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>

</iframe>

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>

</iframe>


  • 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>

</iframe>


  • 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>

</iframe>


Browser Support:

  1. Google Chrome

  2. Mozilla Firefox

  3. Safari 8

  4. Internet Explorer 11

  5. Microsoft Edge

Summary

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>

</video>

</div>


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

Summary

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?

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
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 }}