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

Scott Bishop replied to Scott Bishop's discussion
Endless Scrolling for Photo &amp; Video Pages
"Certainly! It was in my Custom Code box: 
<!-- Endless Scrolling FWN BEGIN -->
<script type="text/j…"
3 minutes ago
Anastasiia_NING support posted a discussion in NING BUSINESS CLUB
Hello bar. This is an elaborate toolbar placed at the top of your screen. With its help, you can se…
3 hours ago
Anastasia_Ning_Support replied to Scott Bishop's discussion
Endless Scrolling for Photo &amp; Video Pages
"Hello!
Usually, when the script stops working after the SSL update there is a simple way of fixing…"
8 hours ago
Anastasia_Ning_Support replied to Marly's discussion
Profile question removal?
"Hello!
When you need to change some part of the default text on the site - please check the Languag…"
8 hours ago
Anastasia_Ning_Support replied to Harald Bornebroek's discussion
Sign in via LinkedIn, Twitter , Yahoo etc.
"Hello!
Unfortunately, LinkedIn is not available as a sign in/up option for 3.0 platform. 
On 3.0 su…"
9 hours ago
Annabel Gregory replied to Annabel Gregory's discussion
Posts not appearing on the Latest Activity Feed
"Well, thank you, Ning! At long last, our Latest Activity Feed is suddenly working perfectly. All fi…"
10 hours ago
shantanu natu, Brandon Batts, PODOLCZAK and 1 more joined Ning Creators Social Network
13 hours ago
Marly posted a discussion
With ning we can create our own profile questions, however, is there a way to remove or change the…
16 hours ago
Scott Bishop posted a discussion
Does anyone have a good hack to create endless scrolling on our photo and video pages? I had a grea…
22 hours ago
Scott Bishop replied to George H. Compton IV's discussion
(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)
"Hi George, 
Thank you for this update. My site was finally updated with SSL today and it broke your…"
yesterday
Anastasiia_NING support posted discussions in NING BUSINESS CLUB
yesterday
Harald Bornebroek replied to Harald Bornebroek's discussion
Sign in via LinkedIn, Twitter , Yahoo etc.

Hi Anasatsia,
Thanks but I can not find the LinkedIn one.  How do I get that one?
How do I get th…"
yesterday
More…

Meanwhile, you can check our social media channels