YouTube player embed with attached playlist

YouTube player embed with attached playlist

Tuesday, September 29th, 2009 in Mootools

YouTube player with MooTools MyTube is a MooTools 1.2 plugin developed using the available player API and data API from YouTube. Basically, if you’re an YouTube publisher or simply someone who wants to display some videos pulled from YouTube on his website, this is for you.

For example, if you want to display some related (or not) videos into a post in your blog, instead of displaying 3-4 players for each video, you can have only one player and attached to it into a playlist, all 4 videos so your users can choose what to play.

The script is completely unobtrusive giving the possibility to display multiple playlists with attached video players retrieved from YouTube based on either an user name to pull videos from or simply by using the video ID you can get from any YouTube video link. All embedding and displaying is done by the script, no special knowledge needed except some CSS.

How to install: add mootools framework, MyTube scripts and stylesheet to your document header

1
2
3
4
5
<script language="javascript" type="text/javascript" src="scripts/mootools-1.2.3-core.js"></script>
<script language="javascript" type="text/javascript" src="scripts/mootools-1.2.3.1-more.js"></script>
<script language="javascript" type="text/javascript" src="scripts/YTVPlayer.js"></script>
<script language="javascript" type="text/javascript" src="scripts/MyTube.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Set proper HTML to display the player with playlist in your page

1
2
3
4
5
<div class="MyTube_container">	
	<a href="#" class="toggle">playlist</a>
	<div id="MTPlaylist_0" class="MT_playlist"><!--{'list':'50','user':'metallicatv'}--></div>	
    <div id="MTPlayer_0" class="MT_youtube_player"></div>     	
</div>

After that, create an instance of MyTube() in your page ( put the code into and external file and add the file to your page header or simply put the script in the head section of your page ):

1
2
3
4
5
6
7
window.addEvent('load', function(){	
	this.YTVplayer = new MyTube({
		messageLoading: 'Loading, please wait...',
		onlyEmbeddable: true,
		defaultDisplay: 1
	});	
}.bind(this));

If you noticed in the HTML example, inside #MTPlaylist_0 there’s an HTML comment. That’s how you define the user to pull videos from and the number of videos to be pulled. For example, if you set the comment to be something like:

1
<!--{'movies':'someId|someOtherId'}-->

The script will ask for those 2 ids and youtube will return information only for those. Please remember that user and movies can’t work both at the same time. If you define user to pull videos from and you define individual videos also, the user will prime and manually defined videos will be dropped.

As for parameters, there are only few of them and they are:

  • playerConfig.showRelated: at the end of each video, the player can display related videos. Set this to 1 if you want it to
  • playerConfig.showSearch: same as the previous one, but for displaying search
  • playerConfig.showInfo: same as the previous 2 but for displaying video info
  • messageLoading: when the playlist loads, inside it you can set a loading message to be displayed to your users. Set this to something like “Loading… wait” but in your language
  • onlyEmbeddable: some youtube videos can be embedded in other websites, some can’t depending on how it was set by the owner. Set this to true to display in playlist ONLY embeddable videos. If false, it will display the thumbnail but you won’t be able to play the video ( player will output something like Embedding disallowed by owner )
  • defaultDisplay: this can be 1 or 2. If 1, on page load it will display the playlist and hide the player. If 2, the other way around.

As stated before, some other parameters can be defined into the comment you set in your playlist container. These can be:

  • list: number of maximum videos to display in playlist
  • user: user ID to pull videos from. You can get this from Youtube->Channels
  • movies: individual movies defined by you. Separate each id with |

Was this useful? Show your support.

digg YouTube player embed with attached playlist

138 comments

  1. Captain says:

    Great job Constantin!
    problem with IE9, it doesn’t work

  2. John Booth says:

    Wonderful script. Thanks MUCH. I just wish the thumbnails would arrange themselves from left to right… instead of top to bottom. Is this possible?

  3. John Booth says:

    For some unknown reason… regardless of which thumbnail I select, the first video loads…

    You can see at http://johnericbooth.com/jma/ – designing this site for a client.

    PLEASE HELP! Also, would love it if video thumbnails would load from left to right!

    Thanks. John

  4. Jimmy says:

    hi,
    please i need help to install this ç.ç
    where do i get the “mootools framework”? what is it? why do i need it? ._.
    and i don’t understand how to define the user to pull videos from ._.
    please help. i’ve been looking for a cool script like this for months! @.@
    i absolutely need to make it work!

    • MooTools is a JavaScript framework and you can get it here. You need it because the whole script is made “on top” of this framework. Bottom line, without mootools, this script won’t work.

      About getting the user playlist, you do that by placing the comment inside the playlist HTML element:

      <!--{'list':'50','user':'metallicatv'}-->

      The code above means: get from YouTube user metallicatv the first 50 videos that he uploaded. Download the examples, look at the demo and you’ll get the idea. It’s fairly easy to implement, you just need to put a little effort into it.

      • Jimmy says:

        it still doesn’t work ._.
        i downloaded the javascript from the first link in this page http://mootools.net/download. it’s mootools, isn’t it? it’s called “mootools-core-1.3.2-full-compat.js”

        i’m asking you a big favour: this is what a added to my site http://img850.imageshack.us/img850/8497/mysite.png
        (i highlighted the addons with a red colour)
        the first of the 5 lines with “<script… etc" is a "link" to the mootools that i put into my site's server.
        everything should be ok, right?
        but stil it doesn't work ._.

        • Hi Jimmy,

          Don’t know if you noticed but the download comes with mootools included. You need to use the files from the zip file you downloaded here. The steps needed to install the script are described above. Look at the demo you downloaded ( check the HTML source ).

  5. John Booth says:

    Very unexpected… since I THOUGHT I placed everything exactly like YOU did! I reviewed your demo page (Metallica) and everything appears to be the same. Thanks much for “finding a cure!”

    • Happy to hear you found the cure. By the way, what was it?

      • John Booth says:

        DIDN’T find a cure for the same video loading… just the cure for making the thumbnails run from left to right. STILL don’t know why the same video still loads regardless of whichever thumbnail is selected. HELP!

        • Sorry for the delay, was pretty busy with other work. Anyway, solved your problem. Elementary actually and you should know this: mootools and jquery conflict with each other. To solve this, you need to load jQuery with noConflict() set on. Leave youtube scripts as they are, it’s all OK there. But in your page you add jQuery and nivo slider. What you need to do is replace the code you have for jquery and nivo with this:

          <script type="text/javascript" src="slider/scripts/jquery-1.6.1.min.js"></script>
          <script language="javascript" type="text/javascript">
          $.noConflict();
          </script>
          <script type="text/javascript" src="slider/scripts/jquery.nivo.slider.pack.js"></script>
          <script type="text/javascript">
          (function( $ ){
          $(window).load(function() {
          $('#slider').nivoSlider({
          pauseTime:8000, // How long each slide will show
          });
          });
          })( jQuery );
          </script>

          This should do the trick. You owe me a beer for this one :)

      • John Booth says:

        Constantin… PLEASE go to the page I have created. Does the code look ok? I was very careful when I placed it… it isn’t complicated! I recall in your instructions about placing that bit of code…

        window.addEvent(‘load’, function(){
        this.YTVplayer = new MyTube({
        messageLoading: ‘Loading, please wait…’,
        onlyEmbeddable: true,
        defaultDisplay: 1
        });
        }.bind(this));

        I was a little confused by this. But it seems this bit of code is already included in one of the .js files correct?

  6. John Booth says:

    I don’t suppose it would be one of the stylesheets creating problems… the script “seems” to function perfectly as far as visually (I love the way it smoothly expands the table borders and then closes back up when playlist is fetched).

  7. Jimmy says:

    why can’t i add this to my site? ._. i need help ç.ç

    • Read carefully the article above and look at the demo file source code. It’s all explained in there. If there’s a problem, please ask specific questions, there can be any answers why you can’t install the script.

      • Jimmy says:

        ok, maybe I found the problem.
        i entirely copied the content of index.html, the file included in the zip package “my_tube.zip”. and everything should work fine, i actually saw that the script works (i simply launched the index.html file and it works).
        i uploaded all the .js files into my site “jscripts” folder and added that J the code strings that i put in the “head” of my site (in your files, the javascripts are recalled by “”, i had to a J to “scripts”. that’s it).
        then everything should be ok. everything should work fine… but it doesn’t… i see just a black rectangle with the word “playlist” in the top right of it. no thumbnails, no video reader, no animations of any kind.

        so this is what i concluded: there must be an incompatibiliy between mootools scripts and mybb platform. my site is made on mybb, a free version of vbulletin platform. it has never given problems to me… till now.
        so i just want to ask you: do you know of any incompatibility between mootools and mybb?
        i give up keep trying ._.

        still really thank you for your help and you patience :)

        • I don’t know about incompatibilities with mybb but there are some with other JavaScript frameworks. For example, if you also use jQuery in your site, this plugin won’t work because MooTools and jQuery conflict with each other. This problem can be solved by starting jQuery with noConflict(). If you use prototype, this plugin won’t work at all and there’s no solution for it, it’s either MooTools or Prototype.
          Now a question: where exactly did you implemented this (complete address to it)? I might be able to tell you if there’s a conflict in your pages.

  8. Jimmy says:

    ok, thanks anyway :)

  9. David McTeir says:

    When using the individual videos from youtube, if the video id has a dash (-) in it, it seems to break the script.. Is there any way of escaping the dash or fixing it in the scripts somewhere?

  10. Fu says:

    Is it possible to add a “fullscreen” function to the player?

    • The player comes directly from YouTube. Can’t say for sure it can or can’t be done with some additional JavaScript but the player itself I don’t believe can be modified to have whatever buttons one might want.

  11. Mike says:

    Thanks so much for this – works great! I have one feature request that I was hoping might be possible. I was hoping to load a specific playlist from a user (instead of all the videos on that user’s channel). Is there currently any way to do this? Any help would be much appreciated!

    • Sorry, at the moment this feature isn’t available.

    • steve says:

      Just add an ‘else if’ statement for a playlist to the MyTube.js file (in the playlists function) like this (the user and movies ‘if’ statements are already present. notice the playlist ‘else if’ statement under the one for movies):

      if(data.user){
      url+=’users/’+data.user+’/uploads/?v=2&alt=json-in-script&orderby=published’;
      if( data.list )
      url+=’&max-results=’+data.list;
      }
      else if(data.movies){
      url+=’videos/?v=2&alt=json-in-script&orderby=published&q=’+data.movies;
      }
      else if(data.playlist){
      url+=’playlists/’+data.playlist+’?v=2&alt=json-in-script&orderby=published’;
      }

      then add “playlist” and playlist ID to the index.html page like this:

      It worked for me.

      • StevenB says:

        Steve – I updated the MyTube.js file with the else statement for playlists. Then in my index.html file I changed the comment line to be

        but that doesn’t work. What’s the correct way to add “playlist” and playlist ID to the index.html page?
        Thanks in advance for clarifying this point for me.
        I

        • StevenB says:

          I see the problem with posting to this page. The comment statement (which lists the parameters for the playlist get interpreted as a comment by this page and therefore don’t display. Let me try it this way:

          I changed the comment line my index.html to:
          (NOTE: I ADDED SPACES TO TRICK THE MESSAGE BOARD INTO THINKING THAT THIS ISN’T A COMMENT THAT SHOULD BE IGNORED)

          • StevenB says:

            Steve (and everyone else) -
            My apologies, but I’m having troubles getting around this comment page ignoring the comment line. Let me try it this way:
            (NOTE: REMOVE ALL of the “x”s)

            • StevenB says:

              “less than sign” “exclamation point” “dash” “dash” “left brace”‘playlist’:'PL7BE049FC08386500′ “right brace” “dash” “dash” “greater than sign” (I hope that this finally works to explain how I have it incorrectly set up.

            • StevenB says:

              One error fixed. When I cut-and-pasted the else statement from steve’s message into the MyTube.js file, my editor changed the single-quote marks into those fancier open-quote-mark or close-quote-mark (like what Word’s auto-correct does to quotation marks). Now my player displays with the “Loading, please wait…” message that never ends. So I assume I still have an issue with how I have the playlist ID defined.

            • StevenB says:

              When I use Steve’s playlist id (F3876ED3DDD89C7A) it works. But when I use my playlist id (PL7BE049FC08386500) it does not work. I’ve verified and I have my playlist privacy set to “public” and have the setting checked for “Allow others to embed this playlist”. I’m not sure where to go from here.

            • Scott says:

              Try removing the P from the front of your playlist address. I discovered this by accident trying to query playlists for my channel in various ways. It seems to work.

              BTW – Thanks very much for a great, simple solution!

  12. John says:

    You are trying to solve de IE9 problem or will just wait for an update by microsoft with IE10?

  13. John says:

    Why did you remove my post about the bug in IE9? Or that problem is already solved?

    • I haven’t removed anything, just haven’t had the time to answer. No, I didn’t had the time to look into the problem and I can’t say when I’ll be able to. I’m involved in some extensive projects at the moment and don’t have time for much else, sorry about this. Apart from that, I also have client work that needs to be done and come as priority. Just as everyone else, I need to put food on the table and unfortunately, free stuff doesn’t do that, hope you can understand that. I’ll try and release and update, when will that happen I really don’t know at the moment.

  14. Nj Hourquebie says:

    Hi there…

    Love the script. A few questions, however.

    Firstly, I have noticed that if the VideoID contains a dash (-), e.g. Mkh2qe6-t_4, the playlist doesn’t display. The script doesn’t seem to have a problem with underscore (_) though. Any suggestions on how to work around this.

    Secondly, regarding John’s work-around for IE, could you (or someone else here) perhaps translate the “Adobey” into English. I have never (nor will I ever, I fear) claim to be even marginally capable in Flash and, therefore, can’t seem to make head or tail of their IE solution. Currently, my site is telling my visitors to switch to “a real browser”, which is not ideal.

    Lastly, I have a video displaying in my playlist that is not called in my code. I have reworked the code to call VideoIDs from my database so I don’t know if that is messing with it. When I check the source code (as per Chrome), that VideoID is nowhere to be seen. Any suggestions as to why it would be doing this? I have checked it in Firefox, Opera and Safari for Windows and it still appears.

    Any assistance would be appreciated.

  15. Nj Hourquebie says:

    Okay, it helps if I read *both* pages of comments. I sorted out the dash (-) issue but I am still having problems with that video displaying that I do not want. I thought it may have something to do with how I was calling the records from the database so I implemented the PHP script you recommended to Ricardo Lopes but the video is still there. The IE issue remains (but is much lower down on my list of priorities at the moment). Thanks again for a brilliant script.

    • Sorry about the delay, I have some family problems that need taking care of. About the dash and the comments, I know information is pretty much all over the place and should be structured somehow but I really don’t have the time to do that. Glad to hear you found a solution. About the video displaying into your player, I really don’t know what to say, that shouldn’t happen but again, all the script does is query youtube’s API for video details and play them into the player they provide. Can’t say why you get that. Would help f you could place the whole thing somewhere online for testing.

  16. John Booth says:

    Hey there my man…
    You was a terrific help a few months ago, and I thank you. Using the script within my own website this time around, and in hopes of retrieving chosen videos from within my youtube account. Have tried to utilize the option of calling individual videos but doesn’t seem to work. Just a blank area. I am pretty sure I have things set up correctly…

    <a href=”#” rel=”nofollow”>Back To Artist Videos</a>
    <!–{‘list’:’10′,’movies’:'k12vXG1RyHw|jNDsfpJBFb4|ywLQSoy6CY|S7XeLEn93U4|5Wgtix6KGPM’}–>

    YES?

  17. David Beach says:

    Great script, i have noticed that in the demo you have fixed the problem where when you click any video it only displays the first youtube video in the list, but the download code this is still broken, could you update that code for us please?

    Thanks

    • The demo is exactly the same thing as the download. Problem is with Flash player permissions and stuff (not a wiz in flash but it’s what I noticed). If you place the demo on a server (local will do) you’ll see that it works fine while if you simply extract the contents on your desktop and try to use it, you won’t get the desired functionality.

  18. Robin says:

    Hi loved the script . .amazing. work.
    just want to know if any possibility where we can make the display actually look like a youtube channel
    where by default a video is displayed on right side and rest of the list on right . something like the layout of youtube instead of just showing the playlist.

    would be great .. if it can happen . and again great work .bro. .cheers

  19. Edo says:

    Hello Constantin, thank you for the script!

    I’m currently using it with the scrollbar.js from the mild folks (http://2011.mild.ch/projects/productslider.html). I’m doing so because i have a limited space for the playlist and i’m trying to simply put a stylish scrollbar in it to show more videos in the same space. Unfortunetly this is giving me some hard time, since the my_tube uses motools 1.2.3 and scollbar uses 1.2.4; the script doesnt work how it should. You can have a look at: http://papricacomunicacao.com.br/teste/videos/index2.html

    Would really apreciate a little hand there. =]

    • Will try and update for moo 1.3+ one of these days.

      • Edo says:

        So , i found out that the ie 9 work just fine with the motools 1.2.5, so i updated. Now everything works great (even better than before, actually) just the ytvplayer.js is giving me some trouble. It says that $(‘YTV_videoPlayer_’+player_id).cueVideoById(video); on line 35 is not defined, so when i click on a thumbnail, it doesn’t play the video. I guess if you could fix that, it’s possible to update the plugin and make it work for all major browsers.

        Hope to hear from you soon =]

        • Edo says:

          oops, my bad…i had some jquery being called in the header by the theme that i’m working in…just change the mootools version to 1.2.5 and select the core.more expects to the plugin needs and it’ll work just fine =D I’m really happy with the output of the code, thank you really much =]

  20. Matthew says:

    Nice script – thanks for sharing and works as advertised. Couple quick questions on customization. I’d like to lay the playlist thumbnails out along the bottom verses the top and turn off the animation so they’re always visible. Also need to place each clip name centered below each clip thumbnail. Can all this be done in CSS or does it require tweaking of the script?

    Lastly, I’d like to have the full screen button, but it appears that’s not an option here for some reason (odd since you rarely ever see a YouTube video that doesn’t off a full screen option). Is this a MooTools limitation in the player they use/reference or just need to be fixed in the YouTube player reference (I’ve seen values like {allowfullscreen} that enables this with their regular iframe embeds)?

    Thanks in advance.

    • For the titles to be displayed beneath the thumbnail, you’ll need to edit the JavaScript. Sorry about that.
      Regarding full-screen option, this player uses the chromless player api google provides and loads the SWF player from google. Can’t say why the full-screen button isn’t available and to be really honest, I don’t really have the time right now to look into it. If you find out something, please let us know and we’ll try and make an update.

  21. Richard Perry says:

    First off, thank for this script, it works wonderfully! However, I have noticed if you change the “list” to more than 50, the script will continue to load and never change. Is this something on my end? Or possibly something with the script?

    Thanks!

    -R.J.-

  22. Mike Barwick says:

    IE PROBLEM SOLVED! Since the author is “too busy” making excuses why he’s busy.

    People, people…for the IE issues…JUST UPDATE MOOTOOLS…OR LINK TO GOOGLE’S CDN:

    https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools.js

    Fixed!!!

  23. CousinJack says:

    Cool script, thanks!

    Question: Is there a way to list the individual movies playlist in a customized order? I have a long movie divided into several parts, they will not go in order in how I have it set up.

    Example,

    I have:

    It displays:

    Movie 2, Movie 1, Movie 3….

    Could it be in the MyTube.js file, coded in the
    this.items.playlists.each(function(el, playlistId), “orderby=published” line?

    Also, I noticed that I need a space between the | for the movies to work.

    Thanks.

  24. Andru Dunn says:

    Hey, great script, and thanks also to everyone who’s added or help explain certain functionalities, especially the playlist one. I have a question, I am trying to have 3 separate players on one page, all in separate div’s, positioned on the page one beneath the other – so I can separate my 3 different playlists.

    All players load fine and show their playlists, however it doesnt work completely – all videos play through the top player. Regardless of which player I select the thumbnail from, It loads the video solely from the top player, not even showing a video player for the lower two divs.

    Is this something I could potentially get to work? I assume its something to do with them calling from the same scripts.

    Thanks in advance!

  25. aashipathan says:

    hi, Great work,I am new to youtube related, i have little problem in this script when i play any one video after that i click playlist and click new playlist new video link but not display(run) new clicked video so pls. help me….

    thanks,

Leave a comment