Ning 3.0 Tip: Insert Videos and Music Players on Profile Pages

[SweetPotato]

Hi all,

UPDATED 10th Jan 2015 and now compatible with v2 themes, and supported here.

Inspired by the conversation going on over here, I have spent today writing a hack so that members of your Ning 3.0 network can include YouTube, Vimeo, ReverbNation, SoundCloud etc embeds on their profile pages (like they can in text boxes on Ning 2.0).

This places an embed below the member profile cover area, like so:

The script assumes that the embed code is iFrame based, as those eagle-eyed in the code stakes will soon see, and works by asking members to insert the embed code into a profile question.

Here is a step-by-step guide:

1) Add a Profile Question to your Ning 3.0 site. Make it a "Website Address" answer and you MUST include the word 'embed' in your question. In this instance the question is

Include a video or music player on your profile page by inserting embed code below

You might want to change the wording but make sure that embed is in there.

2) Go to the Custom Code section of your Ning 3.0 site and add the following script to the End of Page Code box.

<!-- PROFILE PAGE EMBED www.SweetPotato.me.uk -->
<script>
x$(document).ready(function() {
if (x$('.aboutTab-question:contains("embed")').length > 0) {
x$('.module-body.aboutMember').append('<div class="SP_Profile_Embed_Wrap"><div class="SP_Profile_Embed"></div></div>');
}
x$('.aboutTab-question:contains("embed")').remove();
var embed = x$('.aboutTab-questionAndAnswer:contains("iframe")').text();
x$('.SP_Profile_Embed').html(embed);
x$('.SP_Profile_Embed').contents().filter(function(){ return this.nodeType != 1; }).remove();
x$('.aboutTab-questionAndAnswer:contains("iframe")').remove();
});

</script>

3) Now add this css to the Design Studio:

.SP_Profile_Embed {
text-align: center;
width: 100%;
margin-top:20px;
}

Members will now be able to add embeddable vids and music players via their profile update screen.

Here is a working example.

All seem to be responsive if you select the right embed options.

The css ninjas among you will want to tweak the look and feel of the .SP_Profile_Embed wrap, so by all means go ahead.

For now I've gone for simplicity. The embed is below the cover area but it can of course be modified to sit anywhere on the page, just drop me a PM.

Enjoy!

SP

More Tips Here

[Edie Antoinette]

You are the MAN SP! I am still working on it but knowing you're here thrills my soul. Mine is a Music Network, so this rather assuages my angst in relation to 3.0. Thank you from the heart.

[SweetPotato]

Edie2k2, you're welcome. I have a version of it for V2 themes too if needed.

Be sure to check out for more tips on my site.

SP

[Edie Antoinette]

Thanks Again!

[Elena Slobtsova]

Perfect tip and very useful for my network, thank you so much

[SweetPotato]

My pleasure Elena. SP

[Alex - Rosas † Negras]

NC for Hire

I can't get it to work ... and can get help with precise photos also for the reason that we do not know if the codes must be placed below or above the codes of my theme thanks

[Skye]

From what I can tell even with Georges updated code it just won't work done properly, with Ning changing codes it disables this code like it did for AnGellas background CSS code.  I no longer have a Ning community because I found a better option still I have friends here so I am trying to help but it seems we are limited.

[Matthew Aukai Wright]

 It doesn't seem the code is working for me anymore. Can you please help me. 

[Kyryl_Ning_Support]

Hi there!

I have checked the code and it works fine, are you sure you have installed everything right and have followed the instructions properly? Could you please describe what you have done and how you have tested the work of the code?

Looking forward to hearing from you.

Best regards,

Ning Team.

[Matthew Aukai Wright]

Hey there Kyryl Never mind I fixed it Thank you for the help though. :)