Cyprus-Forum.com

[Get Real!]

Create your own HTML menu of your favorite YouTube videos.


Today I’m going to show you how to create a simple “front end” for all your YouTube videos so that you’ll have a list of titles that you can just click onto in your browser for the video to play using the following simple HTML format…

<div><a href="Youtube Link"; Target="_blank"; >Youtube Title</a></div>


By inserting each Youtube link and the Youtube title as shown in the HTML command above, we can create a simple HTML page of clickable links. Of course if you are like me and have 100s of favorite Youtube songs we’re just going to have to automate things using a little coding which I’ll explain in due course.

Step1: Ok, to get started you’ll first need a text file list of your favorite video titles and links that looks like this…

Gloria Gaynor - Can't take my eyes off you
http://www.youtube.com/watch?v=uuvPvUmEzoE
10 CC - I'm Not In Love
http://www.youtube.com/watch?v=Y2BavhwpIJg
Promises - Baby It's You
http://www.youtube.com/watch?v=-pJVdIKHO8o
Evanescence - My Immortal
http://www.youtube.com/watch?v=5anLPw0Efmo
Boney M - Kalimba De Luna
http://www.youtube.com/watch?v=8JEjMW-Frqc
Jim Diamond - I Should Have Known Better
http://www.youtube.com/watch?v=Af3G2cfYayY
Firehouse - When I Look Into Your Eyes
http://www.youtube.com/watch?v=kxJBN_AHfas
Bad English - When I See You Smile
http://www.youtube.com/watch?v=oaGt3FJFZPA
Robbie Williams - Feel
http://www.youtube.com/watch?v=Vml2xJi5BWE


You can have hundreds of links in your list if you like as long there’s only one per line with the title first, and save it as a text file… MYLIST.TXT

Step2: Now here’s the “magic” part that does the conversion from MYLIST.TXT to MYLIST.HTML for you. It’s a small utility written here in Turbo Pascal which you can compile if you have Borland’s compiler, rewrite in your favorite programming language, or send me an email address so that I can send you the executable file as an attachment… (source code follows for those who want to compile it themselves or for the plain curious)

{$A+,B-,D-,E-,F-,G+,I-,K-,L-,N+,O-,P-,Q-,R-,S-,T-,V-,W-,X-,Y-}
{$M 8192,0,0}

PROGRAM YouTubeMaker; {Takes a list of song titles and links to create a HTML file}
VAR F1,F2:Text; S1,S2,S:String; N:Integer;
BEGIN
N:=0;
Assign(F2,'Mylist.html'); Rewrite(F2);
Assign(F1,'Mylist.txt'); Reset(F1);
WHILE NOT EOF(F1) DO
BEGIN
Readln(F1,S); Inc(N);
IF Odd(N) THEN S2:=S ELSE
BEGIN
S1:=S;
S:='<div><a href="'+S1+'"; Target="_blank"; >'+S2+'</a></div>';
Writeln(F2,S);
END;
END;
Close(F1); Close(F2);
END.



Step3: So in the new directory we created C:\MYLIST\ we should now have a text file called MYLIST.TXT and an executable file called MYLIST.EXE, and once we run our executable file it’ll create our MYLIST.HTML file which will load in our browser when we double-click on it with all our favorite Youtube links!

If you like what we’ve done so far drop me a line here and I’ll next show you how to beautify this HTML front end and even make it 2-3 columns wide!


Regards GR!

[CBBB]

Why?

[cyprusgrump]

Why?

+1

[Me Ed]

Or you can just create playlists or put them in MyChannel in YouTube...

[Get Real!]

Why?

Because using Youtube’s facilities means you have to have an account and be logged on there to use it. My method makes us independent by having our own menu sitting on our desktop to do what we please with it. It's your own personal jukebox.

[cyprusgrump]

Why?

Because using Youtube’s facilities means you have to have an account and be logged on there to use it. My method makes us independent by having our own menu sitting on our desktop to do what we please with it. It's your own personal jukebox.

I hope you didn't spend much time on it...

[Get Real!]

Why?

Because using Youtube’s facilities means you have to have an account and be logged on there to use it. My method makes us independent by having our own menu sitting on our desktop to do what we please with it. It's your own personal jukebox.

I hope you didn't spend much time on it...

To this stage it’s a piece of cake but as you build on that it gets more and more complicated depending on the features you want.

[Get Real!]

Stage 2:

This is where we start to make our menu prettier. In stage #1 we ended up with a plain ugly single column list of video links that we could click onto but now we’re going to fit (center) those song titles into pretty boxes, spread them out to 3 columns on the screen, and even add a background colour! It’s starting to look good but to achieve it our little utility is growing and getting more complex…

{$A+,B-,D-,E-,F-,G+,I-,K-,L-,N+,O-,P-,Q-,R-,S-,T-,V-,W-,X-,Y-}
{$M 8192,0,0}

PROGRAM YouTubeMaker; {Takes a list of song titles and links to create a HTML menu}
VAR F1,F2:Text; S1,S2,S:String; N,Z,Left,Top,Y:Integer;
BEGIN
N:=0; Z:=1; Y:=5;
Assign(F2,'Mylist.html'); Rewrite(F2);
{-----------------------------------------------------------}

Writeln(F2,'<html><body bgcolor="#0B2F3A"></body></html>');
Writeln(F2,'<style type="text/css">');
Writeln(F2,'.AudioTitle {');
Writeln(F2,'Font-family: "sans-serif";');
Writeln(F2,'Font-size: 13px;');
Writeln(F2,'Font-weight: Normal;');
Writeln(F2,'Font-style: Normal;');
Writeln(F2,'Text-decoration: None;');
Writeln(F2,'Text-align: Center;');
Writeln(F2,'Color: #FFFFFF;');
Writeln(F2,'Filter:Shadow(Color=#000000 ,Strength=1);');
Writeln(F2,'Height:0;}');
Writeln(F2,'');
Writeln(F2,'.AudioBox {');
Writeln(F2,'filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color='#000000',Positive=''true'');');
Writeln(F2,'-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=2,OffY=2,Color='#000000',Positive=''true'')";');
Writeln(F2,'Padding: 1px;');
Writeln(F2,'Width: 320px;');
Writeln(F2,'Height: 16px;');
Writeln(F2,'Background-color: #686868;');
Writeln(F2,'Border-style: Solid;');
Writeln(F2,'Border-color: #A0A0A0;');
Writeln(F2,'Border-width: 1px;');
Writeln(F2,'Text-align: Center;}');
Writeln(F2,'</style>');
Writeln(F2,'');
{-----------------------------------------------------------}
Assign(F1,'Mylist.txt'); Reset(F1);
WHILE NOT EOF(F1) DO
BEGIN
Readln(F1,S); Inc(N);
IF Odd(N) THEN S2:=S ELSE
BEGIN
S1:=S;
S:='<div><div Class="AudioBox";> <a href="'+S1+'"; Target="_blank"; Class="AudioTitle";>'+S2+'</a></div></div>';
CASE Z OF
1: BEGIN
Left:=12; Top:=Y; Inc(Z);
END;
2: BEGIN
Left:=350; Top:=Y; Inc(Z);
END;
3: BEGIN
Left:=688; Top:=Y; Z:=1; Inc(Y,24);
END;
END;
Writeln(F2,'<div style="position:fixed; left:',Left,'px; top:',Top,'px;"</div>');
Writeln(F2,S);
END;
END;
Close(F1); Close(F2);
END.


How's that? Starting to look good...

In Stage 3 we’re going to add a splash screen (your favorite JPG as a background) create song categories, detect and signal broken links, and even have a little button on the right of each broken link that automatically fixes it!!!

Whoa… stay tuned!

I’m also toying with the idea of introducing all our Ms Outlook contacts into this front end… but what would my contacts have to do with my song list???


NB1: I forgot to mention that the box shadow effects (Microsoft.dropshadow) used here will probably only work in IE. Feel free to post something that is universal if you like.

NB2: Source code indentation gets chewed up by the forum software unfortunately.

[Get Real!]

Tune in tomorrow for Stage #3 where things start to get interesting!

If you’re keen to do this but are completely lost don’t worry because all you have to do is start working on your song list (MYLIST.TXT) and I’ll do the rest for you which I can send you via email.

Your ideas and input are welcome even if you don't understand the tech side.


For example, when we click on a song should a new window open and play it in Youtube or should a flash player appear in front of us?

Stuff like that we need to decide upon…

[FragnaticDeath]

Nice GetReal