YouTube player embed with attached playlist
Tuesday, September 29th, 2009 in 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 |
Related posts
Was this useful? Show your support.
46 comments
[...] MyTube is the Wordpress plugin implementation for YouTube MooTools player embed with attached playlist. Simply put, this plugin will allow you to easily insert YouTube videos into your Wordpress blog [...]
Hi,
I downloaded you script, it’s really cool, but when I click over the thumb, it only displays the first video, and in the Firebug appears an error: $(“YTV_videoPlayer_” + player_id).cueVideoById is not a function
I hope, you can help me with that.
Thanks.
Hi Frank,
Could you point me to an online example? It usually goes faster like this.
First sorry for English, I
Brazilian, I am learning English.
congratulations for the great plugin.
I wonder how do I link the slider to go
single post or page view. Not to category
page. thanks
What plugin are we talking about here? This is a script that pulls youtube videos. I assume you wanted to post on WP Featured Articles. If that’s the fact, I’ll give it a try: currently, you can’t link the slider to a single post but you can do it for pages. Just go to WP-admin->Settings->Featured Articles and change settings for Display on.
Hi, I need to fit a youtube playlist into a very small space, 204w x 115w px. I can set the css for this, but I need the playlist thumbnails to resize much smaller. Is there a way to do that in the javascript?
Thanks!
The thumbnail size is the size from youtube. They don’t provide multiple sizes.
Hi Frank,
I had set up your player on my website but when I add the videos it could display maximum of 10 videos.
Please see sorce code as it is not display the last videos that is in a new row.
http://www.555webdesign.co.uk/lewisjohnproject/my_tube/index.php
Can you help me about?
Thank you!
For some reason I believe youtube truncates the query so no more than 10 ids can be passed. There is a solution to this but it will need a bit of work. The script could be modified to use playlists pulled from youtube so basically there won’t be any need to set any video ids, just the playlist set in youtube and all done. I’ll have to give it a look.
Can you show me how to remove the toggle effect i would love to have the playlist below the video player and not have it toggle?
You’ll have to change the script in more than one place. I’ll try to implement this option into the script so you can control this with a parameter but it will take some time so I’ll appreciate it if you could wait a bit. Thanks.
Hi Constantin,
This really rocks, although I’m having some problems when I try to use a movies list, and one ID has a “-” on it. Have you tested this? Is there any way to fix this?
Thanks for sharing!
Hi Adrian,
Yes, I tested this with the WP plugin I made based on this script. The problem is that when you query a movie id having – in its name, YouTube thinks that you want to exclude whatever is after -. To avoid that, wrap the id into “” ( double quotes ) and you’re done.
For example, if you open index.html from the archive you downloaded here and change the to:
<!--{'movies':'"h0-sokE6XTY"|Il5sK_gER48|CsNrQBR7WbA'}-->it will work just fine.
Thanks Constantin.
I’ve just tested as you said and it worked just fine!
Hello, Constantin!
How can use php to call id?
Like this:
<!--{'movies':}-->' |'}-->Thank you in advanced
My question is not completed, let me ask in another way:
I am trying to get all the videoid from sql database using php.
How can I do?
Thanks
Hi Ricardo,
To do what you ask for, you can use the following approach:
<?php/* sql query to select movies from database. change movie_id and movies_table with your movie id column and your movies table */
$sql_movies = "SELECT movie_id FROM movies_table";
/* ids will be saved in this array */
$movies = array();
/* the actual query for the movies */
$query = mysql_query($sql_movies )or die(mysql_error());
/* put the movies ids into $movies array */
while($r = mysql_fetch_array($query )){
$movies[] = $r['movie_id'];
}
?>
<!--{'movies':'<?php echo implode( '|', $movies);?>'}-->
Let me know how this works.
thank you very much for your quick answer, but I’m not programer and I did’t get the point…
I need only 4 videos and I have in sql:
Table: LISTING
Column: ID1, ID2, ID3 AND ID4
If i understand correctly your code is for 1 id, right?
Again, I’m not programmer but I think that I need something like this:
$sql_movies = “SELECT ID1|ID2|ID3|ID4 FROM LISTINGS”;
$movies[] = $r['ID1|ID2|ID3|ID4'];
So, if I understood correctly, you have 4 columns in your table each having one video id and you need to retrieve only the first line? If that’s the case, the code above would look like this:
<?php/* sql query to select movies from database. change movie_id and movies_table with your movie id column and your movies table */
$sql_movies = "SELECT id1, id2, id3, id4 FROM listings";
/* the actual query for the movies */
$query = mysql_query( $sql_movies )or die( mysql_error() );
/* retrieve only first line */
$movies = mysql_fetch_row( $query );
/* if no result returned, turn $movies into an array */
if( !is_array( $movies ) )
$movies = array();
?>
<!--{'movies':'<?php echo implode( '|', $movies );?>'}-->
Thank you very much for your attention but I found that PHP is not a brain surgery or rocket science and I fixed my self. That’s what I include in your code:
$movies1[] = $r['ID1'];
$movies2[] = $r['ID2'];
$movies3[] = $r['ID3'];
$movies4[] = $r['ID4'];
$movies5[] = $r['ID5'];
$movies6[] = $r['ID6'];
<!–{'movies':'|||||’}–>
Thank you again and if you came to US, please stop for a coffee : )
Will do
About the changes you did, if you’re using the second script version, the whole array gets populates when you do mysql_fetch_row(). So basically, you don’t need $movies[1] = $r[ID1], $movies[2] = …
As a note, instead of adding your movie ids on columns, add them on rows. Make a table for example having as columns: id, youtube_id, description and insert each movie id on one row.With this, the first script will work.
Anyway, if you need PHP/MooTools help in the future and don’t know where to go, drop me an e-mail. Cheers.
…||…
Your system is blocking the code, but I did something like this:
<!--{'movies':'(movies1)|movies2)|($movies3)|($movies4)|......'}-->Now my play list is working like a charm!
I posted a question yesterday and you removed it (why is that?????)
I still got the same question, the script does not show all my videos from utube profile
it shows only 5 and there are 6 videos!!
whats wrong?!
Nothing is wrong. I answered your e-mail (it was you that e-mailed me from creazy_guy@… right?). If not, please post somewhere online the example you used and drop the link here so I can take a look. Thanks.
Nice Player.
Can it be configured so as to auto-play through all the YT videos, as a TV channel?
Thanks
Pa
You mean playing one video after the previous one ends? No, not possible for now. But it’s a good idea.
Hi
Thanks for the prompt reply.
Yes, I need it to auto-start and play all specified videos in order. Is that possible and likely to happen in the near future?
Cheers
Pa
Hey, how would we get video responses to be the playlist ?
I.e. I want to specify a video, and then have the video repsonses to that be the playlist…
any ideas ?
Hi Rick,
Don’t know for sure if the api provides that too but it looks like a nice addition. I’ll try and find out more on this.
is it possible to use multiple user id’s??? Please advise
Sorry, no. Only one available for the moment.
Needed to re-phrase the question…is it possible to use playlists from multiple user id’s…
Again, no, sorry.
Hey, i’m kinda a noobie at this code stuff but i sort of understand it what i’m trying to do is put multiple videos up on my chatango profile page and have all the youtube videos player off the same player. I think thats what you were talking about how to do, but since im kinda new at this its hard for me to understand what to do. I;m using the firefox plug-in firebug to look up the codes for the videos. but i still need your help if u can. Thank you if you can help me. This would also help me more understand about this “code” stuff….yea i’m a newbie.
Have you tried anything with this script? If so, please put a link to your demo.
Hi Constantin,
This is a great plugin you have here. Thank you.
I was wondering if its possible to have the page show also show the Title of the video at the bottom of the thumbnail and if possible show the number of views and # days ago uploaded like how its on the youtube page when you click on someone’s playlist. i.e.: http://www.youtube.com/user/HuskyStarcraft#g/u
Hi, I tried with only three movies
Each of the thumbnails is presented, but they are not displayed in order AND, when clicking on ANY thumbnail, the same video is shown.
Otherwise, very cool. And I second the motion to have sequential play through of the videos.
Without the commenting characters, the movies were: {‘movies’:'dSiNq6R4kfM|ulln35Hf8os|OXxjDoWX5a8′ }
Hi Robert,
Looks like this happens because of Adobe’s security policies. When you open the page, you should see a warning saying something like: Adobe Flash Player has stopped a potentially unsafe operation. … To let this applicaiton communicate with the Internet, click Settings. Basically, what happens here it that the local JavaScript isn’t allowed to access the player’s internal functions to load videos. Once you run settings and set everything, it should work on local.
And I second the motion to have sequential play through of the videos. What exactly do you mean by this?
Let’s say I have 3 videos, all related to one another, and yet distinct. E.g., three contiguous lectures of a class. I want to set the system to play lecture #1, then #2, then #3. Another analogy, the first 3 tracks on a (vinyl) record – I date myself.
I think the cnnmoney site effectively does this (once you hit play, it just iterates through each news story). Of course, they have the money to have a very long reel created and posted. But for us little guys, we’d like to cobble together our different videos.
I see what you mean and I think it’s a good idea. Added to update list. Unfortunately, tomorrow I leave in vacation for a week so… this will have to wait a little.
Could you please shoot me a quick note when you get working on this. I’d love to see your progress and be your first beta tester!
this is so amazing, thanks a lot for providing such an great script. I was just wondering if it is possible to play latest videos from an specific tag i.e “machinima” instead of a personalized list. Anyway I am really impressed with such achievement
Glad to hear you like it. About displaying tag specific videos, it should be possible if Youtube API allows it and from what I know, it does. I’ll have to take a look at it, I already have an update list for this script and this will be added to it. When exactly to expect the update, I can’t really say, but it should be in one of the following weeks.
Leave a comment