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

Forum

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 Network to add comments!

Join Ning Creators Network

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!  

This reply was deleted.

Search the Creators Network

Latest Activity

Philip Voice replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi John
Thanks for your response.
It looks as though all my settings are right."
2 hours ago
Kos replied to CZG's discussion Logging into ning site using Firefox not secure message
"If Ning obtains SSL, it will be for their domain name - not all of ours (who can afford that?) 
No,…"
2 hours ago
Suki Winthrop replied to Jeff Gilder's discussion Saying Goodbye To Ning After 9 Years
"Hi Jeff, couple months have gone by now.
I think there is already a lot of feedback here about what…"
3 hours ago
CZG replied to CZG's discussion Logging into ning site using Firefox not secure message
"Thank you Kos. I think where I am confused about this is that when Ning obtains an SSL Certificate,…"
3 hours ago
Kos replied to CZG's discussion Logging into ning site using Firefox not secure message
"SSL has to do with secure checkout on purchases and has nothing to do with a video being embedded.…"
3 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Hi Phillip, I am seeing them in mine ok. How have you got the page setup ? Is it set to view by adm…"
3 hours ago
CZG replied to CZG's discussion Logging into ning site using Firefox not secure message
"Ning is going to obtain an SSL certificate which should solve this, but my concern is this. What co…"
3 hours ago
Bizz ( John ) replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Nice introduction of videos back onto the Ning 3.0.
There are a couple of issues I discovered

When…"
3 hours ago
Kos replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Glad to see this addition.  Praying Chat is next................"
3 hours ago
CZG replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Since there is currently a storage limit according to each plan many of us will continue to use our…"
3 hours ago
Kos replied to CZG's discussion Logging into ning site using Firefox not secure message
"It began a while ago (on my sites) and Ning says it's not them..........so we either have to waste…"
3 hours ago
Garfield Archivist replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"1) Are the uploaded videos HD or are they the same quality as they are on a 2.0 network?
2) Are you…"
4 hours ago
Jen replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"What a wonderful announcement!!!!!!!!!!! Thank you, Ning!"
4 hours ago
Philip Voice replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"I've added video to our network and added a test video. I note that the site activity feed isn't up…"
4 hours ago
Thisisbully replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Once u pay for it a few hours to kick inn"
5 hours ago
Thisisbully replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"Nice"
5 hours ago
Kyryl_Ning_Support replied to Jungla's discussion I do not have access to my network SOS
"Hi there,
Your network is available for me at the moment, however, any script that we are using cou…"
6 hours ago
Kyryl_Ning_Support replied to Ian's discussion Side Backgound Image keeps shrinking and orienting left & animated gif header isn't working
"Hi there,
Sorry for the inconveniences. As I see the issue with the gif animated pictures has been…"
6 hours ago
CZG replied to Yana Ning Support's discussion Video Feature on Ning 3.0 is now available!
"How longs does the SSL certification take?
Also, will the SSL certification block embedded videos f…"
7 hours ago
dronej is now a member of Ning Creators Network
7 hours ago
More…