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.
 

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

Kos replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
""
7 hours ago
Anastasia_Ning_Support replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Hi there!
Thank you for your patience!
You have already contacted us via LiveChat, but I will leave…"
18 hours ago
Ceddy J replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Do we have to make new Facebook apps, or can we edit the ones we have?"
Saturday
Philip Voice replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Sorry for the confusion.
Does this change affect any group pages that we have running or is it just…"
Friday
Matthew Aukai Wright replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Yay!!!! Oh one more thing. Can I add random line of members with their sexuality and their location…"
Friday
Fabricio Giugni replied to Fabricio Giugni's discussion
Add Photos location problem.
"Hi Anastasia,
    Thanks for try... What Can I do to make it more easy. Maybe a code button code th…"
Friday
Anastasia_Ning_Support replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Hi there!
I apologize, but I`m not sure what you mean by "existing pages on Facebook". Are you refe…"
Friday
Anastasia_Ning_Support replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Hi there!
I`ve passed your screenshot to Alex, the code will be corrected in the nearest future. Yo…"
Friday
Philip Voice replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Before I do this...what about exisiting pages on FB we have? Does this process start the page again…"
Friday
Matthew Aukai Wright replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Hi there. we can do the second one. I took a screen shot where I will like the picture to be. "
Friday
AMZ replied to Ashish's discussion
Ning 3 - Not hapenning!
"The internet is different from early 2010s. Features aren't going anything. What you need is a stra…"
Thursday
Ashish replied to Ashish's discussion
Ning 3 - Not hapenning!
"Yes, thats not good.... But imagine i am sitting on duck! Not even 10members per week, can you plea…"
Thursday
More…

Meanwhile, you can check our social media channels