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.

This reply was deleted.

Latest Activity

Ning via Facebook

A or B? Black or white? Discover why A/B testing is more than simple choice of 2 landing page…

Kyryl_Ning_Support replied to DD's discussion
A few features that would make Ning even better...
"Hi there!
Mentions - I have seen in the documentation that our tech team is thinking how this funct…"
9 hours ago
Kyryl_Ning_Support replied to Bizz ( John )'s discussion
Multiple choice poll- how to make the selections stand out better
"Nice tip, John!"
11 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Hi Kos,
I have tried to reproduce this issue on my PC but no luck with that. Could you please share…"
11 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Thanks, I have updated the suggestion with your notes :-)
When I would hear something about this I'…"
11 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"Hi there!
If you mapped your domain, in that case, yes, it's not the only thing you should do. The…"
11 hours ago
Robert Martin, waimaoniu, Brawen and 50 more joined Ning Creators Social Network
12 hours ago
Ning via Facebook

The best 23 articles about social media are here for you! Follow the link and read them all!…

Kos replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"To be honest, I think it depends on the SIZE of the network and how heavily they use Chat.  I think…"
yesterday
Mary Adams replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"There is now a check box in my Ning 2.0 site  to use SSL. I imagine that I don't just check the box…"
yesterday
Ning via Facebook

Your blog HAS its voice! And you have outstanding chance to make it awesome. Begin with these…

Kos replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"No, not really although I will say, when I initially open chat, the chat screen is blank and I have…"
yesterday
More…

Meanwhile, you can check our social media channels