Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

Sometime ago anyone who visited one of my sites may have noticed that if you clicked on a video thumbnail it would play in the activity feed. Now this is something I did not share on here at the time so thought you may like to have the code I used for it. So how it works is that if someone clicks on a video thumbnail a message will come up to say video loading and it will display in the activity feed ready to watch. Underneath are two links to add comments or to watch in the main video page. There is a close button to close the video but also if they click on another video any one that is open will close and only the current one will show. When multiple videos are show as in when four are in a line it will work for those too. Clicking any of the other links like the title etc will take them to the main video page.

You can give it a go here:  https://swindongromsquad.ning.com/

Ok So here is the code

FIRST PART IS THE CUSTOM CODE, THIS CODE GOES IN YOUR SITE&PAGES END OF PAGE SECTION ( DO NOT COPY THIS LINE )

<script>
//If videos are iframed then css makes them responsive
x$(document).ready(function() {
if (x$('.videoDetailPage-video iframe').length > 0) {
x$('.videoDetailPage-video').addClass('iframed');
}
});
</script>

<script>
x$(document).ready(function(){
var activityVideoMedia = '.feedEvent-createVideoRollup .activityFeed-content a.media-img,.feedEvent-createVideoLike .activityFeed-content a.activityFeed-image,.feedEvent-createVideoComment .activityFeed-content a.media-img, .feedEvent-createVideoRollup .activityFeed-content a.activityFeed-image,.feedEvent-featureVideo .activityFeed-content a.media-img';
     x$('body').on('click', activityVideoMedia, function(e){
        e.preventDefault();
var titleURL = x$(this).attr('href');
x$('.activityShowMe-container').remove();
x$('.feedEvent-createVideoLike .activityFeed-content a.activityFeed-image').addClass("media-img");
x$(document.body).css({ 'cursor': 'wait'});
x$(activityVideoMedia).slideDown(500);
x$(this).parent().append('<div class="activityShowMe-container"><div class="activityShowMe-header"><a class="activityShowMe-closer" title="Close the Video">X</a></div><div class="activityShowMe">Video Loading...</div><div class="activityShowMe-page"><a class="activityShowMe-comment">Comments</a><a class="myTitleLink" title="View In Main Video Page">View In Main Video Page..</a></div></div>');
x$('a.myTitleLink, a.activityShowMe-comment').attr("href", titleURL).appendTo('.activityShowMe-page');
x$('a.myTitleLink, a.activityShowMe-closer, a.activityShowMe-comment').hide();
x$(".activityShowMe").load(x$(this).attr("href") + " .videoDetailPage-video", function() {
if (x$('.videoDetailPage-video iframe').length > 0) {
x$('.videoDetailPage-video').addClass('iframed');
}
x$(".activityShowMe").hide().fadeIn();
x$(document.body).css({ 'cursor': 'default'});
x$('a.myTitleLink, a.activityShowMe-closer, a.activityShowMe-comment').fadeIn();
});
x$('.videoDetailPage-viewVideo').remove();
x$(this).slideUp();  
x$('a.activityShowMe-closer').click(function(){
x$('.activityShowMe-container').slideUp("slow", function(){
x$('.activityShowMe-container').remove();
x$(activityVideoMedia).slideDown(500);
               });
          });
        });
    });
</script>

NEXT IS THE CSS AND THIS GOES IN YOUR DESIGN STUDIO CUSTOM CSS, YOU MAY HAVE TO ADJUST SOME OF THE COLOURS FOR THE CLOSE BUTTON DEPENDING ON YOUR COLOUR SCHEME ( DO NOT COPY THIS LINE WITH THE CSS )

/* Make video Responsive */

.videoDetailPage-video.iframed{
    margin-bottom: 5px;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.videoDetailPage-video.iframed iframe{
    max-width: 100%;
    height: 100%;
    width:100%;
    position: absolute;
}

/*MUTIPLE VIDEO ADD LINE UP*/
@media only screen and (min-width:771px){
.activityFeed-image:not(:only-child) { max-width:25% }
}

/** LOAD VIDEO INTO ACTIVITY **/
.activityShowMe-container{clear:both; max-width:1280px; margin-top:10px }
.activityShowMe-header{ width:100%;clear:both;height:40px }
a.activityShowMe-closer{
    padding: 4px 8px;
    border-radius: 70px;
    background-color:white;
   color: #cc7474;
    cursor: pointer;
    font-weight:bold;  
    float:left;
    clear:both;
    border: solid 1px darkgray;  
}
a.activityShowMe-closer:hover{ background-color:royalblue;text-decoration: none;color:white;font-weight:bold }
.activityShowMe-page a{ display:inline-block; cursor:pointer }
.activityShowMe-page{ margin-top:8px; text-align:right; width:100%;clear:both }
.activityShowMe-page a{ font-size:0.9em }
.activityShowMe .sheet{ padding:10px 0px 0px 0px!important }
a.activityShowMe-comment{ float:left }
.activityShowMe .site-body{ background-color:transparent }

@media only screen and (min-width:300px){
.activityShowMe { font-size:1.5em; }
}

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • NC for Hire

    Nice work Bizz!

    • Thanks Justin :-)

  • We wondered where you were John.  Yes, we missed you!  *lol*  Good to see you back

  • Hi John,

    If you don't mind I'll feature this tip :-)

    Best wishes,

    Ning team.

    • No worries Kryrl, pleased you like it and if it helps others then great. By the way I am so glad you made the Creators page wider as it helps sharing codes which makes it easier for others to copy it out.

      On the subject of the videos in the activity feed will you guys be adding the same functionality for adding comments like we have for the photos ?

      • Hi John,

        I'm glad that the wider page is more convenient for you :-) Regarding the comments under videos from activity module, I do remember you have suggested implementing such functionality in the past, but unfortunately, I still haven't heard yes or no from management regarding this suggestion.

        I hope they would be able to take a look into this when we will finish tests with paid access and implementation of the https for custom domains, as basically, it's our top priorities at the moment.

        Best regards

        Ning Team.

  • Nice work John, installed and works perfectly. 

    Thanks for sharing and Happy New Year.

    Best Regards,

    Sir Gissa

This reply was deleted.

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Anastasia_Ning_Support replied to Hugh's discussion
Ning Failures Continue to Mount up
"Hello Hugh!
The issue with photo upload is already in the process of solving, so I believe the fix…"
4 hours ago
Anastasia_Ning_Support replied to Greg Pond's discussion
Ning help = No help. On the way out?
"Hello Greg! 
Please let me express my sincere apologies. 
I see that the list of the recent issues…"
4 hours ago
Anastasia_Ning_Support replied to Hugh's discussion
Support So Bad - Even the Support System Now Broken
"Hello!
I am very glad to hear that the Support tab on the networks is now working properly! 
I beli…"
4 hours ago
Anastasia_Ning_Support replied to Anastasia_Ning_Support's discussion
Welcome Landing Page Builder
"Hello! 
Thank you for showcasing your results, it is always welcome here on Creators! 
Best regards…"
5 hours ago
Anastasia_Ning_Support replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Hello!
I appreciate your honest feedback! You are right, the outdated manual should not be displaye…"
5 hours ago
Anastasia_Ning_Support replied to Steve C's discussion
Comparing Speeds of Ning 2 and Ning 3 Sites
"Hello!
We are reviewing each case separately, and so far it seems like we have found a common issue…"
6 hours ago
Anurag Khode is now a member of Ning Creators Social Network
7 hours ago
Greg Pond posted a discussion
Running v.2 vespaclubmelbourne.com.au since 2011 - which makes us a long term customer! Right throu…
8 hours ago
Edie Antoinette updated their profile
12 hours ago
Hugh posted a discussion
As I understand things, the original team sold Ning to Glam/Mode. Mode then failed, and its resourc…
17 hours ago
Hugh replied to Victoria_NING's discussion
Let’s recall the Q2: what was achieved
"And so as not to gloss things over too quickly,  let's recall what wasn't achieved.
I still cant do…"
18 hours ago
⚡JFarrow⌁ replied to Hugh's discussion
Ning Failures Continue to Mount up
"Wow.....not sure what is going on..."
21 hours ago
More…

Meanwhile, you can check our social media channels