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

⚡JFarrow⌁ replied to Victoria_NING's discussion
Don't forget to join our groups!
"Thanks... still trying to get my listing on the Solutions Provider Directory updated.. 

i sent the…"
7 minutes ago
⚡JFarrow⌁ replied to Maritza's discussion
HELP!!! Customizing Site with Photos
"Oh I see... so you need to create a logo to replace this one inside the theme and change it in your…"
12 minutes ago
Ning via Facebook

One more story from our Creator! This time, we want to tell you about Theodocia McLean and her…

More…

Meanwhile, you can check our social media channels