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

LIVE DEMO HERE:

https://jr-images.ning.com/videos

 DEMO IN ADD CONTENT MODULE

https://jr-images.ning.com/activity

 

Ok so here is a new tip I have been working on with regards to video pages. As we know when we have video pages the videos are listed by the video image and when we click on one of those it then goes to that videos main page to view the video. All works well enough but a bit of a pain to keep going backwards and forwards to just view some videos.

So here is what I have come up with. When you click on a video from the list page or video bundles it loads that video into that section and auto plays it.

Click on another video and the previous one closes and loads the new one.

There is also a little toolbar which shows up so you can click the X if you prefer which closes the video, there is also another icon to the left which will open the video in a bigger player.

At the bottom is a  Like/Comment section which when clicked on will open the comments form which you can view comments add a comment and rate it or like the video

The expanded viewer shows a bigger version of the video and also has a menu at the top right where you can also comment, like the video. A restore button is also there which collapses the video back into the list page or an option to close the video and return to the list page.

There are navigation buttons which enable you to go to the next video or previous video, the video which auto play when it's loaded.

Works in the Add Content video modules you add to a page as well

Also works in profile page tabContainers

Examples

LIST PAGE

9583432469?profile=RESIZE_584x

 9588919271?profile=RESIZE_710x

EXPANDED VIEWER

9583433683?profile=RESIZE_710x9583441062?profile=RESIZE_710x

ADD CONTENT MODULES

You can see this working on my Activity page

9583462689?profile=RESIZE_710x

MEMBER PROFILE PAGE TAB CONTAINER

Althought the Like/Comment section does not show underneath the video you can still do that by using the expand video option by click the box on the top left

9583463480?profile=RESIZE_710x

 

 

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

Join Ning Creators Social Network

Votes: 2
Email me when people reply –

Replies

  • NC for Hire

    This looks really cool Bizz!

  • Now added the navigation for previous and next videos. So far all looks to be working very well. Think this is just about ready to share but will give it another day or two for some final testing and a little tweaking.

  • Stars ratings now added to them, all that's left to do now is a filter by ratings and then add comments form.

  • Made some more updates to this, now in the list page when a video is chosen it autoplays, also now can add view comments and rate and like. In the expanded viewer you can also view comments rate and like . Also when using the next or previous it now auto plays the video when loaded.

    This is just about ready to share the code once I have added one more little update.

  • 9588923677?profile=RESIZE_584x

    Added a little update to this as thought it would be nice to show the video next to the comments when you choose Like/Comment from the list page. Also a few little bug fix's for when you have add a video module and there are other video modules on same page or it's added next to the list page. The next and prev buttons where getting a little confused between all the videos so that's now fixed.

     

  • it is also possible on 2.0 ?

    • Sorry Not with this code, Ning 2.0 is coded in a different way. It would be possible but everything would have to be re-written for 2.0.

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

Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"status-container {border: 2px groove #eed255;padding: 10px;border-radius:…"
1 hour ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"I don't copy codes, the first person who created this is jen ,you have never had this css since I…"
1 hour ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"thank you my Master Bizz "
1 hour ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"⚡JFarrow⌁ 
we all miss you brother. creators in need of your codes,let's make this place alive…"
1 hour ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
".status-container {border: 2px groove #eed255;padding: 10px;border-radius:…"
1 hour ago
⚡JFarrow⌁ replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"took the words out of my fingers..."
2 hours ago
Bizz replied to Rosas † Negras's discussion
Ning 3.0 - if you want to stylize your status-container these are CSS
"The above code you added is wrong, it has a curley bracket at the start and not one at the end of…"
4 hours ago
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I will add my profile themes back onto my demo site as this will give you some idea of just how…"
4 hours ago
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"Ok no worries will get that to work for you, it's just a matter of attaching the classes to the code"
4 hours ago
Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"All the classes can be seen by inspecting the thing you want to change using the browsers developer…"
4 hours ago
Rosas † Negras updated their profile
8 hours ago
Rosas † Negras posted a discussion
search bar
9 hours ago
More…

Meanwhile, you can check our social media channels