Hiding and/or Moving the Myspace Music Player

!!!TOTAL UPDATE!!!

First off, this post exists because I had made mention of having moved the myspace music player on my profile (which, thankfully, no longer exists; I encourage all of you to delete your accounts). Seeing that many people were here only to feed their myspace addiction, I’ve done the evil thing and fed them. See below for how to move the myspace music player and also how to make it just disappear.

!!!PLEASE UNDERSTAND THAT THIS IS ONLY ADDRESSING THE SMALL PERSONAL PLAYER, NOT THE FOUR SONG BAND PROFILE PLAYER!!!

Movement of the player is possible because of CSS, which – among limitless other things – allows you to change the properties of already existing HTML tags, such as the two we’re going to mess with.

!!!MUY IMPORTANTE: RETYPE THESE CODES INTO YOUR PROFILE IN ANY FIELD, BUT DON’T COPY AND PASTE!!!

Before CSS will work on you profile, you have to ‘activate’ it – as it were. To do this, type these HTML tags into any field on your edit profile page:

<style type=”text/css”>

:::CSS HERE:::

</style>

Now we’re going to see the CSS codes that actually move the player. These CSS codes should be written between the style type and /style tags.

I’ve used two ways to move the player, both have pros and cons: You can change the embed tag or the object tag (depending on the situation, I’ve used both, though currently I am changing the object tag like you saw above).

When you change the embed tag, you can re-place the player and change the size of it, but it only shows up in Firefox; nothing will have changed in IE. BUT, it looks and works exceptionally on Firefox.

Changing the object tag with CSS will allow you to move the player, and it will work for both IE and Firefox. BUT, you can’t change the size of the player at all.

!!!THOSE WHO HAVE OVERLAYS AND OTHER MAJOR PROFILE CHANGES, NOW HEAR THIS!!!

The overlays and other assorted ways in which you can debacle myspace might (probably will) affect whether these codes work the same way. My profile that you saw above changes this dramatically. So, will it work with you profile, I don’t know. Try them both and find out.

So let’s get into it, and start with the embed property.

embed {
position: absolute;
visibility: visible;
left: #px;
top: #px;
}

Now for the object code:

object {
position: absolute;
visibility: visible;
left: #px;
top: #px;
}

Now let’s look at each line to see what’s going on:

position: absolute;

That makes the position of the player determined by the upper left hand corner of the screen and not the usual sitting place of the player between the url and info tables. You’ll see better why that’s important in a bit.

visibility: visible;

This line ensures that – if at all possible – the player will be visible. Now should you want the player to be invisible, change the line to say:

visibility: hidden;

Moving right along:

left: #px;
top: #px;

This designates how it’s current position will change. The px stands for pixels and you’ll replace the # signs with actaul numbers like so:

left: 200px;
top: 200px;

That just designated that I wanted to move the player 200px away from the left edge of its position and 200px away from the top of its position. So basicly I moved the player 200px to the right and 200px down. Change the number of pixels until you have the player resting where you want it (yes, trial and error). Now here’s why it is important to have used absolute positioning. The alternative to absolute is relative. Relative means you will be moving it so-and-so many pixels from it’s default position. That wouldn’t be so bad except that its relative position can change from browser to browser; so what looks just perfect to you could be hundreds of pixels off on some other computer. Whereas, the left edge and top edges of the screen will always be at the left and top edges of every computer’s display. While this won’t ensure that there will be no difference between browsers or computers, it usually lessens the movement.

So here’s how she should look all together:

<style type=”text/css”>

object {
position: absolute;
visibility: visible;
left: 200px;
top: 200px;
}

</style>

Or for the embed tag to be changed:

<style type=”text/css”>

embed {
position: absolute;
visibility: visible;
left: 200px;
top: 200px;
}

</style>

And here’s the best way to just hide the player all around:

<style type=”text/css”>

object {
position: absolute;
visibility: hidden;
left: 0px;
top: 0px;
}

</style>

I’m sorry, but I’m not answering questions anymore, haven’t since somewhere in the mid two hundreds. It became a bit of a bother, plus everybody just screams about how they can’t get it to work. Everything you need is there, but you’re on your own otherwise. Please don’t jump up and say what an idiot I am and how the code doesn’t work. There are plenty of people already using this same piece of code, many of them got it from this site, and it’s working fine. So remember that the code works, but humans are prone to error. And again, remember to retype it into your profile, not copy and paste.

And hey, this is only one post on an entire blog (shameless plug). Actually, my poetry and assorted writings and ramblings are all here, so take a look around.

…and it’s only getting better,
Greg