Add Youtube Songs to members profile

Add Youtube Songs to members profile · by **Luffy** on November 23rd 2016, 2:27 pm

Hello all,

With this tutorial I will show you an easy way of adding Youtube Songs to your members profiles. This way all members are allowed to add a song of their choice and change it whenever they want. This code works for all version of forums and it's simple and easy to add.

Profile Addition

To add this to the profiles you need to make a new field. To do that go to:
Admin Panel > Users & Groups > Users > Profiles > create a new field using the green cross and make it as below:

and add as the Deafult Content: to the text zone the below code:

Code:: [table class="ytbSong" id="ytS"][tr][td][youtube][/youtube][/td][/tr][/table]

Save the field and then go ahead and hit replace content to replace all the fields with the code.

CSS Addition

All that's left to do is to add the below code in your CSS:
Admin Panel > Display > Pics and colors > Colors > CSS Stylesheet and add the code:

Code:: /* Tutorial and code by Luffy */ table#ytS:hover { transition: 300ms; left: 0; } table#ytS:after { content: 'Profile Song'; position: absolute; right: -50px; top:30px; transform: rotate(90deg); background: #cdcdcd; color: #353535; padding: 5px; } table#ytS { position: fixed; transition: 300ms; left: -585px; top: 25%; background: #353535; display: block; width: 560px; height: 315px; padding: 10px 15px 15px 10px; z-index: 9; }

Save the CSS.

Once you do all these then if you go to your profile you will see this showing to the left of your screen:

Once you hover that you will see this:

All you have to do, is edit the field and enter the video url from youtube.

Example:: Click the edit button to your profile field and enter the link within the youtube tags:

it should be something like this:

hit save and hover the profile song tag and see your video song there:

After that you can edit the field and change the link to an other link and change the song anytime you want.

You can do any modifications you want through the CSS.
I hope you like it and enjoy this tutorial. bounce