HTML5 Video Wrapper for YouTube and Vimeo API – MediaElement.js

November 28, 2011 | JavaScript, Video | 51 Comments

YouTube and Vimeo APIs

YouTube and Vimeo have nice APIs to allow JavaScript developers to control the playback of embedded content (oh, and YouTube has a new design). They’ve also updated the APIs to use the newer <iframe> embed style instead requiring <object><embed> flash tags. But as powerful as those APIs are, they are not consistent with each other and neither one conforms to HTML5 <video> properties or events so you can’t leverage your existing skills or code.

MediaElement.js HTML5 Wrapper

To make the YouTube and Vimeo APIs easier to use, I wrapped the MediaElement.js shim structure around their proprietary APIs to make them feel like HTML5. So for a YouTube video, you can use this <video> markup

<video id="youtube1" width="640" height="360">
	<source src="" type="video/youtube" >

Then to build a full-fledged player that is CSS skinnable on top of YouTube Chromeless , you can simply call the MediaElementPlayer like this:

jQuery(document).ready(function($) {


Or you can skip MediaElementPlayer’s controls and build your own player using just the MediaElement wrapper which does not require jQuery (MediaElement is the wrapper which shims HTML5 support into old browsers, MediaElementPlayer is the full-fledged jQuery-based control bar built on top of MediaElement).

new MediaElement('youtube#', {
	success: function(media, domNode) {
		// add HTML5 events to the YouTube API media object
		media.addEventListener('play', function() {
			console.log('yeah, it is playing!');
		}, false);

		media.addEventListener('timeupdate', function() {
// access HTML5-like properties
			console.log('current: ' + media.currentTime);
		}, false);

		// add click events to control player
		myMuteButton.addEventListener('click', function() {
			// HTML5 has a "muted" setter, but we have to use a function here
		}, false);

Once the success event fires, the media object is a JavaScript wrapper that mimics the HTML5 Media API, but under the hood is really a wrapper around YouTube’s API. Nice right?


There are a few things you should look out for if you want to try it:

  • This code is now in the official 2.4.0 release of MediaElement.js, but it should be considered experimental. I’d like to pull it out of the core and make it a plugin, but this will require some re-architecting.
  • The Vimeo API wrapper is not finished yet. It will simply display the default Vimeo controls. (Also, unlike YouTube’s chromeless option, only Vimeo Pro users can totally remove controls)
  • Some browsers (Chrome, IE) don’t allow HTML to be placed over an <iframe> with Flash inside which makes MediaElementPlayer’s controls not work, so I’m using the pure Flash version of YouTube for desktop browsers
  • Fullscreen: JavaScript can’t initiate Flash’s true fullscreen, and Firefox still has terrible Flash support (if you try to adjust the size of a Flash movie’s surrounding DOM nodes, Firefox reloads it!)

Demo Download

51 responses to “HTML5 Video Wrapper for YouTube and Vimeo API – MediaElement.js”

  1. […] songs that can be streamed off-site. With YouTube, you can get the video URL and with that use an HTML5 video wrapper for YouTube. Using this wrapper, the HTML5 video properties and events are exposed to […]

  2. How can I play my radio station using the mediaelement.js?
    My radio station is located at mms:// as you can see, it uses the MMS protocol that Internet Explorer recognizes automatically and lunches the user’s Windows Media Player on his computer. I do not use ShowCast nor ICEcast and I would preffer not to use those decoders when I already have the MMS (Multimedia Server) from Microsoft.
    So, I thought that using [audio src="mms://"] Should be enough but it does not work.
    Please help.

  3. Giles says:

    Nice idea but your demo doesn’t play for me on Safari on iPad. Only way it plays is if I hit fullscreen button in the controls. Or am I missing something?

  4. Thesing says:

    I like the new look of the YouTube with HTML5 Wrapper is faster better and my slow computer with crappy video card will not got slow anymore, nice job you guys! youtube html5 player
    .skiping MediaElementPlayer’s controls also make it easier to use.

  5. Facundo says:

    Hi, I want yo know if is possible to make that the youtube videos be played in HD by default or if there is a way to put a button to change the video quality.


  6. sandeep singh says:


    I have installed Version 2.5.0 in wordpress and it is working fine for audio but i am having problem in VIDEO as below:

    1) It is working for some video and sometimes it is running but not displaying video.

    Please let me know what is the problem going on.

    Sandeep Singh

  7. how about modestbranding? is there any chance to add that too in future?

    Good job John. thanks

  8. sompylasar says:

    Seems that the Firefox bug ( ) was fixed and tagged for milestone “mozilla13”.

  9. codehappy says:

    Was excited to see your work but when testing the youtube player on the IPad and IPhones (5.1.1 IOS) it didn’t work 50% of the time. It shows the landing thumbnail / jpg but the controls didn’t work and the video didn’t load (on multiple loads of the page, it occasionally switches to the hmtl5 player and functions correctly but this did not work the bulk of the times the page was loaded). Did something change in your code and/or the more recent Apple IOS?


  10. codehappy says:

    Forgot to mention… This was tested on multiple devices both in the code we pulled from the site and on your actual test site.

  11. What about the VIMEO support ?

    The YouTube example works perfectly but when I try with Vimeo the video doesn’t load 🙁

    I just replaced by in your code.

  12. Jermaine says:


    I’ve installed the plugin via wordpress and the audio player works fine but I’m trying to use mediaelement to display youtube videos. I’m using the following code to no avail:

    [video autoplay="false" src="http://" type="video/youtube" width="500" height="275"]

    The version I’ve installed is version 2.9.1.

    Can you please advise where I’m going wrong and whether I need to add something to ‘mediaelement-js-wp.php’?


    • Jermaine says:

      I’ve updated my code and am now using:

      [video autoplay="true" src="" type="video/youtube" width="500" height="275"]

      but unfortunately no luck…

  13. […] trying to embed youtube video in canvas using mediaelement.js according to this page. However, video is not loading, the control player is all black. Can anybody give me some hints? […]

  14. hakim says:

    thankyouuuuuuuuuuuuuuuuuuuuuuuuuuuu .

  15. Joan says:

    Hey John,

    How can we change the source of the video. I’ve tried with this but it seems the setSrc is not working with youtube urls:

    $(‘.mejs-list li’).click(function() {
    var audio_src = $(this).text();

  16. Ben Leung says:

    I used the javacript to control the youtube video,i want the player fullscreen when play the video and exit fullscreen when pause,and that two function will control by outside self-define button,everything works fine but fullscreen and exitfullscreen.the console always raise below error msg:
    Uncaught TypeError: Cannot call method ‘enterFullScreen’ of undefined
    Call method:


    BTW,if i try to change the video type to mp4, everything works fine.

    Could you please let me know how to fix it?thanks.

  17. Petar Pan says:

    I’m using MediaElements and am happy with it. I wonder, how does one skin the audio player? I din’t find the info on the WordPress plugin page. I would like some basic changes – color and stuff.

  18. Layla says:

    Finally i quit my regular job, now i earn decent money on-line you should try too,
    just type in google – slabs roulette system

  19. There’s some really good semi side-by twists in our story, too, that
    I think people are going to love. So it’s almost
    always up to you to initiate, unless you have him feeling deeply
    attracted to you at that moment. Ok now what woman wouldn’t be flattered to be
    recognized as Scarlett as well as other really intriguing woman.

  20. This design is steller! You definitely knoiw
    how to kep a reader amused. Between your wit aand your videos, I
    was almost moved to sttart my own blog (well, almost…HaHa!) Fantastic
    job. I really enjoyed what you had to say, and mre than that, how you presented it.
    Too cool!

    Review my webpage :: social media Bedford

  21. stress test says:

    I pay a visit daily a few web sites and blogs to
    read articles or reviews, but this web site offers quality based

  22. Cassandra says:

    I read a lot of interesting content here. Probably you spend
    a lot of time writing, i know how to save you a lot
    of time, there is an online tool that creates readable, SEO friendly posts in minutes,
    just search in google – laranitas free content source

  23. Sonu Sindhu says:

    Hi ,

    I am trying to put the code in my website and it is working nice.But I want to playlist like:
    I have 8 video:
    2 from youtube
    2 from vimeo
    2 from my own server
    2 from other server

    How to make playlist for that.Can you any idea for that.

    Thanks and regards

  24. Bobcat, mini, kötelező biztonsági vizsgálat, üzembehelyezés, országosan szakértő irodával,
    kedvező árakon, tapasztalattal, megbízhatóan.

  25. I’ve been exploring for a little bit for any high quality articles or blog posts
    in this sort of space . Exploring in Yahoo I at last
    stumbled upon this web site. Reading this info So i am satisfied to
    exhibit that I’ve an incredibly excellent uncanny feeling I came upon exactly what I needed.
    I such a lot unquestionably will make sure to don?t forget
    this web site and provides it a glance on a relentless basis.

  26. időszakos vizsgálat, fővizsgálat, szerekezeti vizsgálat, emelőgép,
    biztonsági vizsgálat, daru országosan szakértővel.
    Budapest, Pest megye főként.

  27. homlokrakodó gép, munkagép, földmunkagép,időszakos biztonsági vizsgálat,
    üzembehelyezés szakértővel országosan.

  28. […] Post Title : Html5 video wrapper for youtube and vimeo api Source : Read More : Html5 video wrapper for youtube and vimeo api […]

  29. Demetrius says:

    Another important tip to bear in mind is that it is always better to inspect the vehicle that the car rental company is giving on rent.
    A lot of them will have deals on rentals, particularly over the weekend.
    Before you opt for making your booking you should
    be aware of the necessary details about the company such as whether it provides high quality services.

  30. blogger says:

    Thanks for the good writeup. It if truth be told used to be a entertainment account it.
    Look complex to far added agreeable from you! By the way,
    how could we communicate?

  31. Kabbalah says:

    Awesome Tips where i got fair idea about API id on youtube But I have a question Can you give me the tricks how can i find alternative External id of any Youutbe video easily ?

  32. curso de seo says:

    Hi to all, it’s truly a good for me to visit this web site, it consists of precious Information.

  33. BroadbandTV also boasts over sixteen,000 content creators
    on its Multi-channel Network (MCN), the third largest on YouTube.

  34. […] Download the source files at 2. If you have not already, link to the JQuery Library in your <head> tag. You can use […]

  35. short url says:

    This info is worth everyone’s attention. When can I find
    oout more?

    my webpage short url

  36. Domen says:


    I am trying to create playlist for audio. I have some mp3 songs form my server, some mp3 from other place and youtube place.

    If I use:

    and put into src youtube link the player works.

    If I try to set setSrc from javascript things don’t work.

    Sample in javascript:
    audioy = $(“audio[id=’player45′]”).mediaelementplayer();
    audioy.setSrc( ‘new youtube url’ );

    I get error: Uncaught TypeError: audioy.setSrc is not a function

    Any idea.


    • Magic Meng says:

      Hello, Domen
      I have the same problem as yours. Did you has deal with it? Can you show me the code?
      I just get the tip : “TypeError: is not a function”.
      No help but thx!

  37. In a statement to Tec – Crunch, Snapchat – DB said that it got the
    information through a recently identified and patched Snapchat exploit and that it was making the data available in an effort to convince the messaging app to beef up its security.
    Like I previously understood, all traffic is https (already better than Instagram, someplace a lonely of mine Stevie Graham found a way to exploit it via a single http endpoint), but they hold a binary pattern with the aim of is used to generate a unique means representing each ask for. Where you must use plants to defend your home
    from zombies.

  38. tuan vu says:

    jQuery(document).ready(function($) {

    it not ok. hepl me. i can’t use to it.

    • tuan vu says:

      jQuery(document).ready(function($) {

      please help me. it wrong

  39. tuan vu says:

    jQuery(document).ready(function($) {

  40. darek says:


    I have some problems with mediaelementplayer with youtube in newest firefox (42). I allowed flash plugin but still doesn’t work. Only I see icon play.

  41. pesso82 says:

    Hello, same problem for me, youtube videos seem not working in firefox 42. Only play icon is shown

  42. Michele says:

    I should start the youtube video at a set time, such as 2 minutes, but the function below does not work for youtube, how should I resolve Thanks!

    document.getElementById (“video1”). addEventListener (“loadedmetadata”, function () {
    this.currentTime = 120;
    }, false);

  43. Ali Jaffar says:

    I use a plugin from Video.js to utilize YouTube and it works, but I prefer mediaelement as it’s already built-in. It works perfect for me — but I have some notes:
    – Why is the flash player the default!?

  44. Alvin says:


    anyone know how to interact with the ready/buffer of the youtube video through mediaelement and remove also the youtube annotations from video?

    Thanks in advance!

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by