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

View Demo Here : http://bizzssite.ning.com/star-wars

When you add a sociall channel page and you click a video to watch it you get just a small video at the top of the page. I decided to have a much bigger video player to fill the screen so here is all the code I used on my site.

First of all a few little notes on how it works. You click a video to play it and you will notice it covers the whole screen, you still get the close button at the top right and the arrows either side of the video to move to the next or previous if there is one. Now to get to view another video from the page you do not have to close the player, if you take a look at the top left you will see a button which says 'More Videos' ( also you will notice that when you hover over the player area a little box message pops up above this to help the user ). Click on the button and the list of the videos from the page will show up and you can scroll to view more of them, to view one just click on it to play it. Note: This list only shows the videos that are on the current page.

In mobile view the next and previous arrows are placed at the top with also the close button. The More Videos list is still there and can be opened and to move to see more videos the user will just swipe the list left or right and to play a video they just press on the one they want to watch.

Also you will notice on the main normal video list page the pagination has been changed to Next and Previous rather than two little arrows. Well here is all the code I have used.

This will become the default view for all your videos from any social page including from groups or social channels added to tabContainers so you only need to add this code once.

First the CSS you need to copy and add to your design studio custom css section ( do not copy this line with the code )

/********** FEED LIST PLAYER **********/

@media only screen and (min-width:771px){
a.feedListPagePlayer-close,a.feedListPagePlayer-close:hover{font-size:25px;margin-bottom:10px }}

.feedListPagePlayer { background-color: rgba(0, 0, 0, 0.82); height:100%}
.feedListPagePlayer .sourceContainer{ border: 1px solid rgb(54, 54, 54);background-color:rgba(0, 0, 0, 0.4);}

/*Sizing The Playing Video*/
@media only screen and ( min-width:481px){
.feedListPagePlayer-source {height:100vh; width:95vw;margin:auto;padding-bottom:1em}
.feedListPagePlayer-source iframe {
    max-width: 85vw;
    height: 80vh;
        width: 100%;}
.feedListPagePlayer-source .nav {font-size:3em}
}

/* Adjust social page nav to go above the video inline with the close button*/
@media only screen and (max-width:771px){
.feedListPagePlayer-source >.cf{ float:right!important; }
.feedListPagePlayer-source .nav{ width:auto!important;top:0%;margin-top:0px;font-size:2em;padding:0px}
.feedListPagePlayer-source .navNext{margin-right:0.7em!important}}

/* Replaces the max width of 400px for the list page */
@media only screen and (min-width:959px){
.feedListPage-item.matrix-itemFluid { max-width: 100%;}}

@media only screen and ( max-width:769px){
.feedListPage-item.matrix-itemFluid {width:50%;}}

.feedListPage-itemTitle {overflow:hidden;padding:.2em 0.5em;line-height:1.28;height:4.2em;max-height:4.2em;font-size:1.1em;}

/** Highlight Videos Colours **/
.feedListPage-item:hover .matrix-item.matrix-sheet{ box-shadow:0px 10px 8px rgba(0,0,0,0.3);border-radius:0px 0px 4px 4px}
.feedListPage-item:hover .feedListPage-itemTitle{ color:whitesmoke;background: rgba(169, 0, 0, 0.74);border-radius:0px 0px 4px 4px; }

/* Pagination on pages, shows the words next previous*/
#feedListPagination.pagination .icon{ display:inline!important; }
#feedListPagination.pagination .icon-next::before{ display:none }
#feedListPagination.pagination .icon-next::after {
    content: "";
}

#feedListPagination.pagination .icon-next::after {
    font-family: "ning-icon-fonts";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    margin-left: 0.5em;
}

#feedListPagination a.pagination-previous{ margin-right:10px}
#feedListPagination a.pagination-next{ margin-left:10px }
#feedListPagination a.pagination-previous:hover{text-decoration:none}
#feedListPagination a.pagination-next:hover{text-decoration:none}
#feedListPagination .pagination .is-disabled{ display:none }
#feedListPagination{ margin-top:15px }

/*** VIDEO LIST UNDER THE VIDEO PLAYER ***/

/** SHOW VIDEOS LIST ON PLAYER **/
@media only screen and ( max-width:481px){
.videolistControl {
position:relative!important;
}}

.videolistControl:before { content:"More Videos";display:block;color:white;font-size:14px }
.videolistControl {
position:absolute;
height: 45px;width:65px;
background-color:rgba(40, 32, 66, 0.84);
padding: 4px;
cursor:pointer;
border-radius: 0px 0px 4px 0px;
}
.videolistControl:hover, .videolistControl:focus{
background-color:rgb(69, 27, 16);
}
.videolistControl.close:before { content:"Close Videos";display:block;color:white;font-size:14px }
.videolist .feedListPage-item.matrix-itemFluid {
max-width: 200px;
}
.videolist .matrix-item.matrix-sheet{
border: solid 1px #565252;
background-color: #4e4040;
padding: 4px;
border-radius:0px 0px 4px 4px;
}
.feedListPagePlayer-source .videolist .feedListPage-itemTitle{
overflow:hidden;
padding:0.1em 0.2em;
line-height:1.1em;
height:3.58em;
max-height:3.58em;
font-size:12px;
color:whitesmoke;
}
.videolist .matrix-item.matrix-sheet:hover{
background-color: darkgrey;
}
.videolist .matrix-item.matrix-sheet:hover .feedListPage-itemTitle{
background-color: rgba(169, 0, 0, 0.74);
}
.videolist{
position: absolute;
margin-top:50px;
width: 94.9vw;
background: rgba(0, 0, 0, 0.91) none repeat scroll 0% 0%;
overflow-x: auto;
overflow-y: hidden;
border-bottom: solid 1px #666;
}
.videolist .module-body {
padding: 0px 5px 10px 5px;
width: 2400px;
}
.videolist #feedListPagination{
display:none;
 }
.tabContainerSection-pane .videolistControl{ display:none }
.section-channel .videolistControl{ display:none }

@media only screen and ( min-width:771px ){
.sourceContainer:hover .videolistControl::after { position: absolute; top: -50px; left: -50px;display:block}}
.videolistControl::after {
    display:none;
    content: "View More Videos By Clicking More Videos Box";
    margin-left: 52px;
    color: #d7d7d7;
    background: rgba(0,0,0,0.95);
    float: left;
    width: 300px;
    margin-top: 5px;
    padding: 10px;
    font-size: 0.8em;
    border: solid 1px lightgrey; }
.videolistControl.close::after{display:none!important}

Next we need to add a little custom code to your site and pages custom code end of page box ( do not copy this line with the code )

<!-- SHOW CHANNEL VIDEOS IN PLAYER -->
<script>
x$("<div></div>").attr('class','videolistControl').prependTo('.sourceContainer');
x$("<div></div>").attr('class','videolist').appendTo('.videolistControl');
x$( ".feedListPage .module-body" ).clone(true).appendTo('.videolist');
x$('.videolist').hide();
</script>

<script>
x$(".videolistControl").click(function(){
x$('.videolist').slideToggle(300);
x$(this).toggleClass('close');
});
</script>
<script>
x$('a.closer.pull-right.feedListPagePlayer-close').click(function(){
x$(".videolistControl").removeClass('close');
x$('.videolist').hide();
});
</script>

Enjoy, John :-)

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

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • I wonder if Ning is taking notes.  *lol*   Thanks John!

  • This is great! Thank you John!

    • Thanks Giovanni :-)

  • Thank you! Ning need to put you on payroll. You are a beast!

    • Your welcome Dan, glad you liked it. :-)

  • NC for Hire

    homerun!  

    3239297?profile=original

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

Pam Givens replied to Pam Givens's discussion
Landing Page
"What I meant to say, if I could spell:
I've attempted to create a landing page and have't had much…"
yesterday
Pam Givens posted a discussion
I've attempted to crate a landing page and have't had much success.  I'd rather have one on my…
yesterday
Luxury Residences updated their profile
Dec 6
Asumi Carol updated their profile
Dec 2
Shada Hotel updated their profile
Nov 29
Howard Sands replied to Mark Thorpe's discussion
NING is broken?
"I am not a techie, I don't understand the first thing about it, but have a HUGE problem with Ning…"
Nov 27
Howard Sands replied to Donna MacShoe's discussion
Ning Support phone number for my 20 yr old site
"I hope this helps
Ning  https://www.ning.com/contact-us/
1-855-233-6436 (USA/Canada Toll Free)…"
Nov 27
Donna MacShoe posted a discussion
I am completely locked out of my NING site that I have had for 20 years.  ladiesofthehat.org.  When…
Nov 27
Joven left a comment on Ning Networks en español
"Zzz..."
Nov 26
Ron updated their profile
Nov 25
Ron updated their profile photo
Nov 24
Mark Thorpe posted a discussion
I've run networks based on this platform in the past and never have I seen it in such dissarray as…
Nov 20
More…

Meanwhile, you can check our social media channels