Saturday Surprise - "Embed Youtube Music"

A Story by dw817

I set out to develop some code that will work correctly in any browser, and that is making use of good old stable Youtube, and you have the added advantage of a larger music base to choose from.

Press CTRL = (equals) to increase the page size and CTRL - (minus) to decrease the page size

Saturday Surprise

Want to read this in a different language ?
Change the TO field to your own country and click the TRANSLATE button after going HERE

EMBED YOUTUBE MUSIC

* * *

This article is Rated: EVERYONE

I had recently noticed that a previous embed code on my front page is no longer working. I see it works in Google Chrome but not Firefox. And - perhaps it works in your version of Firefox with its plugins, but not mine.

So I set out to develop some code that will work correctly in any browser with any plugins, and that is making use of good old stable Youtube, and you have the added advantage of a larger music base to choose from in them.

This is the one I am using:

From Up On Poppy Hill

Here is the code you need to type in your profile to embed this player. Ignore the colored brackets, I use these to ensure that they do not activate within this message:

If you want a player without the custom 56x28 image on the left, use this code instead:

Quite a bit to type out I admit. The easiest way to do this is put the mouse cursor just to the left of the code, hold down the LEFT mouse button and drag down until you have highlighted the code.

Then press CTRL-C to copy it to the clipboard. Then in your user profile, hit CTRL-V to paste it out.

Change {{COLOR}} to the hexadecimal equivalent. Use this color tool if you like:

So RED for instance, you would type out "#FF0000" minus the quotes and will appear as RED.

BLUE "#0000FF" minus the quotes will appear as BLUE.

Remember that the background color for your player window will be BLACK so don't choose black as the font color. You can find more information about changing colors in the HTML tutorial I prepared HERE.

If you selected the code with the image, change {{IMAGE}} to the URL of a 56x28 pixel image that will appear on the left-hand side. If you want to use Writer's Cafe to store this image, create a new document, title it, "Image Storage"

Checkmark the box that says, "Keep this writing unpublished for now so only I can see it"

Then upload all the images you want to have appear on your profile page.

Click on the image you are working with, click the icon to edit the image , click the URL field, press CTRL-C to copy it to the clipboard. Then press CTRL-V to post it in your profile. Save this document for later reference when you need to include images in direct HTML coding.

For {{SONG NAME}}, just type out the name of the song.

For {{YOUTUBE CODE}} type out the code that appears in the address field when you are watching a Youtube video:

https://www.youtube.com/watch?v=GZWuVafxAUg

Where the ending 11-characters are placed in {{YOUTUBE CODE}}

Note that not all Youtube videos allow embedding of this kind. To test it, in your address field type out,

http://www.youtube.com/v/{{YOUTUBE CODE}}

And press ENTER. Then try to play the video, if it plays, you can use it, if not, select a different video that may contain the same or similar audio.

You can also embed these players in your own writings, not just your profile. Type the code as it appears, give an INCORRECT captcha when you save your document then a CORRECT captcha when you save again as it will have embedded in your writing correctly.

And you are done ! To add more than one song in your profile, just press ENTER after every code entry.

When playing a song with the player, you can use the following keystrokes:

0 (zero) to start the song over from the beginning

1-9 (one through 9) to jump 10% to 90% of the song

UP and DOWN arrow keys to raise and lower the volume

If you have any questions or want a variation of the initial music coding, please let me know in the comments.