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 |
Other interesting stuff
Was this useful? Show your support.
26 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.
Leave a comment