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

Rosas † Negras and Néma frantz are now friends
3 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"Max Ning Support "
14 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
Ning Builder-impossible to work on and it doesn't work aspect answer from ning thanks
"Anastasia_Ning_Support  "
14 hours ago
Kinga Incze and Néma frantz are now friends
20 hours ago
Rosas † Negras posted a discussion
right button does not work it is not possible to delete codes and add personal codes
23 hours ago
Randal Joy Thompson is now a member of Ning Creators Social Network
yesterday
⚡JFarrow⌁ commented on ⚡JFarrow⌁'s blog post Tip 2.0& 3.0: How to Make Your Iframes Full Screen and Responsive
"Things have changed just a little bit... now you have to add the following code to page header:…"
yesterday
Max Ning Support and ⚡JFarrow⌁ are now friends
NC for Hire
Tuesday
Vander NG replied to Anastasia_Ning_Support's discussion
Mention feature
"I tested it again yesterday, it seems the NING Support has fixed the problem without notifying me. …"
Tuesday
This Is bully replied to Anastasia_Ning_Support's discussion
Mention feature
"The notification email was from a .Ning.com domain I went to my domain host which is go daddy and…"
Monday
Max Ning Support is now friends with Rosas † Negras and kostasgr
Monday
Vander NG replied to Anastasia_Ning_Support's discussion
Mention feature
"Thanks!  So you got the notification email from this new feature, with the same sender as all other…"
Monday
More…

Meanwhile, you can check our social media channels