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>
Internet Explorer 11
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>
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.
Chrome 6.0 and higher
Mozilla Firefox 4.0 and higher
Safari 3.1 and higher
Internet Explorer 9 and higher
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?