Entry tags:

layouts: playlists, tools: html

Character Playlist: Combining Techniques

Want to make a playlist that has the songs embedded (via YouTube)?
Want to add formatted caption text, too?

This tutorial combines this playlist layout with the Videoless YouTube Player.

INGREDIENTS
1. one 200px tall by 300px wide picture
2. open tabs with the songs you wish to use from YouTube
3. (optional) open tabs with the lyrics you wish to use

I know that's a lot of tabs if you do more than, say, three songs, but it'll make things go faster if you're prepared.

DIRECTIONS

The "Header" Code

Copy and paste ALL of the following code into your post. This sets up the table and adds the picture and character name. Replace the IMAGE URL and NAME places with your information.

<table align="center" cellspacing="10px" cellpadding="8px"> <tr> <td align="center" valign="top" bgcolor="white" style="border:2px solid black;"><img src="IMAGE URL" width="300px" height="200px" style="border: 1px black solid;"> <font style="font-family: Palatino Linotype;font-size:18pt;">name <i>name</i></font> <div align="justify">

The Playlist

1. Copy and paste the embed code from YouTube beneath the song information. It should look like the following. (Note: you can change the color of the player in YouTube before you copy the code.)

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/qdefe7l7_Zc?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qdefe7l7_Zc?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

2. Change the WIDTH and HEIGHT in two places. The new WIDTH should be 300 and the new HEIGHT should be 25.

<object width="300" height="25"><param name="movie" value="http://www.youtube.com/v/qdefe7l7_Zc?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qdefe7l7_Zc?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="25"></embed></object>

3. Wrap the code in DIV tags to get rid of the spacing issues.

Here are the tags:
<div style="margin: 0 -50px -50px -8px;"></div>

This is what the end result should look like.

<div style="margin: 0 -50px -50px -8px;"><object width="300" height="25"><param name="movie" value="http://www.youtube.com/v/qdefe7l7_Zc?fs=1&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qdefe7l7_Zc?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="25"></embed></object></div>

4. To add formatted caption text after the player, copy and paste the following and fill it in.

<font style="font-family: Palatino Linotype;color:#444444;font-size:6pt;"><b>Title</b> <i>by</i> Artist <i>Lyrics</i></font>

5. Repeat steps 1-4 beneath the previous song's code.

Yes, you can come back and remove songs or add more songs later. Just follow these steps.

The "Footer" Code

This ties up all of the loose ends of the table. Copy and paste all of this code at the end of your playlist.

<br /></div></td> </tr> </table>

LIVE EXAMPLE

jonas ackerly My Name is Jonas by Weezer Come sit next to me, pour yourself some tea. Imagine by John Lennon You may say that I'm a dreamer, but I'm not the only one. Ballad of Denim Boy and Grey Girl by Steve Carlson They had faith in each other, everything felt right.

PLEASE, CREDIT rp_tutorials IF YOU USE THIS CODE. THANK YOU.

Questions? Comments?
Leave them here!