InsaneJournal

Tweak says, "I am the walrus!"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2010-12-19 10:39:00

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.

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.)

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

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

Here are the tags:

This is what the end result should look like.

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

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.

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!

(Read comments) - (Post a new comment)

Just in case you were still wondering about this....

___test___
2012-01-31 05:10 am UTC (link)

I was having trouble, too, but I found the fix - Basically this is what the end result code should look like in step 3:

The big part that was missing was the < lj-embed id="1" > <- which the number will have to change for each song, so I suggest starting with 1 and just working up. Also, make sure you put in all the < /param > because if you copy the embeded video from youtube then that part of the code is not in there. I think those are the big issues, but if you want (because it's easier) you can just copy and paste my code from the text area, then just take the links from the embeded code you copied from youtube and paste it where my links are. That should solve the problem in the code for you. If not let me know.

(Reply to this) (Parent)

(Read comments) -