social channels - FORUM - Ning Creators Social Network2024-03-29T15:44:19Zhttps://creators.ning.com/forum/topics/feed/tag/social%2BchannelsTip: Resize your Social Channels Videohttps://creators.ning.com/forum/topics/tip-resize-your-social-channels-video2020-07-13T21:14:21.000Z2020-07-13T21:14:21.000ZBizzhttps://creators.ning.com/members/Bizz208<div><p>Ning have changed the layout for the social channels and so we have a small video in the middle of the screen so here is a tip to make the video full screen</p><p>Example here: <a href="https://jr-images.ning.com/katkam-social-channel" target="_blank">https://jr-images.ning.com/katkam-social-channel</a></p><p>Just add this css to your design studio css</p><p> </p><p>/*** RESIZE THE VIDEO IN SOCIAL CHANNELS ****/<br />@media only screen and (min-width:979px){<br />.feedListPagePlayer-source .sourceContainer {<br /> display: flex;<br /> align-items: center;<br /> width: 100%;<br /> height: 70vh;<br /> max-width: 85%;<br /> position: absolute;<br /> top: 50%;<br /> left: 50%;<br /> transform: translate(-50%,-50%);<br />}<br />}</p></div>Enhance Your Social Channels Player ( All code I have used on my site )https://creators.ning.com/forum/topics/enhance-your-social-channels-player-all-code-i-have-used-on-my-si2017-01-16T22:32:29.000Z2017-01-16T22:32:29.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p><span class="font-size-5">View Demo Here : <a href="http://bizzssite.ning.com/star-wars" target="_blank">http://bizzssite.ning.com/star-wars</a></span></p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p><span style="text-decoration: underline;"><span style="color: #000000;"><strong>First the CSS you need to copy and add to your design studio custom css section ( do not copy this line with the code )</strong></span></span></p>
<p>/********** FEED LIST PLAYER **********/<br />
<br />
@media only screen and (min-width:771px){<br />
a.feedListPagePlayer-close,a.feedListPagePlayer-close:hover{font-size:25px;margin-bottom:10px }}<br />
<br />
.feedListPagePlayer { background-color: rgba(0, 0, 0, 0.82); height:100%}<br />
.feedListPagePlayer .sourceContainer{ border: 1px solid rgb(54, 54, 54);background-color:rgba(0, 0, 0, 0.4);}<br />
<br />
/*Sizing The Playing Video*/<br />
@media only screen and ( min-width:481px){<br />
.feedListPagePlayer-source {height:100vh; width:95vw;margin:auto;padding-bottom:1em}<br />
.feedListPagePlayer-source iframe {<br />
    max-width: 85vw;<br />
    height: 80vh;<br />
        width: 100%;}<br />
.feedListPagePlayer-source .nav {font-size:3em}<br />
}<br />
<br />
/* Adjust social page nav to go above the video inline with the close button*/<br />
@media only screen and (max-width:771px){<br />
.feedListPagePlayer-source >.cf{ float:right!important; }<br />
.feedListPagePlayer-source .nav{ width:auto!important;top:0%;margin-top:0px;font-size:2em;padding:0px}<br />
.feedListPagePlayer-source .navNext{margin-right:0.7em!important}}<br />
<br />
/* Replaces the max width of 400px for the list page */<br />
@media only screen and (min-width:959px){<br />
.feedListPage-item.matrix-itemFluid { max-width: 100%;}}<br />
<br />
@media only screen and ( max-width:769px){<br />
.feedListPage-item.matrix-itemFluid {width:50%;}}<br />
<br />
.feedListPage-itemTitle {overflow:hidden;padding:.2em 0.5em;line-height:1.28;height:4.2em;max-height:4.2em;font-size:1.1em;}<br />
<br />
/** Highlight Videos Colours **/<br />
.feedListPage-item:hover .matrix-item.matrix-sheet{ box-shadow:0px 10px 8px rgba(0,0,0,0.3);border-radius:0px 0px 4px 4px}<br />
.feedListPage-item:hover .feedListPage-itemTitle{ color:whitesmoke;background: rgba(169, 0, 0, 0.74);border-radius:0px 0px 4px 4px; }<br />
<br />
/* Pagination on pages, shows the words next previous*/<br />
#feedListPagination.pagination .icon{ display:inline!important; }<br />
#feedListPagination.pagination .icon-next::before{ display:none }<br />
#feedListPagination.pagination .icon-next::after {<br />
    content: "";<br />
}<br />
<br />
#feedListPagination.pagination .icon-next::after {<br />
    font-family: "ning-icon-fonts";<br />
    font-style: normal;<br />
    font-weight: normal;<br />
    font-variant: normal;<br />
    text-transform: none;<br />
    line-height: 1;<br />
    display: inline-block;<br />
    margin-left: 0.5em;<br />
}<br />
<br />
#feedListPagination a.pagination-previous{ margin-right:10px}<br />
#feedListPagination a.pagination-next{ margin-left:10px }<br />
#feedListPagination a.pagination-previous:hover{text-decoration:none}<br />
#feedListPagination a.pagination-next:hover{text-decoration:none}<br />
#feedListPagination .pagination .is-disabled{ display:none }<br />
#feedListPagination{ margin-top:15px }<br />
<br />
/*** VIDEO LIST UNDER THE VIDEO PLAYER ***/<br />
<br />
/** SHOW VIDEOS LIST ON PLAYER **/<br />
@media only screen and ( max-width:481px){<br />
.videolistControl {<br />
position:relative!important;<br />
}}<br />
<br />
.videolistControl:before { content:"More Videos";display:block;color:white;font-size:14px }<br />
.videolistControl {<br />
position:absolute;<br />
height: 45px;width:65px;<br />
background-color:rgba(40, 32, 66, 0.84);<br />
padding: 4px;<br />
cursor:pointer;<br />
border-radius: 0px 0px 4px 0px;<br />
}<br />
.videolistControl:hover, .videolistControl:focus{<br />
background-color:rgb(69, 27, 16);<br />
}<br />
.videolistControl.close:before { content:"Close Videos";display:block;color:white;font-size:14px }<br />
.videolist .feedListPage-item.matrix-itemFluid {<br />
max-width: 200px;<br />
}<br />
.videolist .matrix-item.matrix-sheet{<br />
border: solid 1px #565252;<br />
background-color: #4e4040;<br />
padding: 4px;<br />
border-radius:0px 0px 4px 4px;<br />
}<br />
.feedListPagePlayer-source .videolist .feedListPage-itemTitle{<br />
overflow:hidden;<br />
padding:0.1em 0.2em;<br />
line-height:1.1em;<br />
height:3.58em;<br />
max-height:3.58em;<br />
font-size:12px;<br />
color:whitesmoke;<br />
}<br />
.videolist .matrix-item.matrix-sheet:hover{<br />
background-color: darkgrey;<br />
}<br />
.videolist .matrix-item.matrix-sheet:hover .feedListPage-itemTitle{<br />
background-color: rgba(169, 0, 0, 0.74);<br />
}<br />
.videolist{<br />
position: absolute;<br />
margin-top:50px;<br />
width: 94.9vw;<br />
background: rgba(0, 0, 0, 0.91) none repeat scroll 0% 0%;<br />
overflow-x: auto;<br />
overflow-y: hidden;<br />
border-bottom: solid 1px #666;<br />
}<br />
.videolist .module-body {<br />
padding: 0px 5px 10px 5px;<br />
width: 2400px;<br />
}<br />
.videolist #feedListPagination{<br />
display:none;<br />
 }<br />
.tabContainerSection-pane .videolistControl{ display:none }<br />
.section-channel .videolistControl{ display:none }<br />
<br />
@media only screen and ( min-width:771px ){<br />
.sourceContainer:hover .videolistControl::after { position: absolute; top: -50px; left: -50px;display:block}}<br />
.videolistControl::after {<br />
    display:none;<br />
    content: "View More Videos By Clicking More Videos Box";<br />
    margin-left: 52px;<br />
    color: #d7d7d7;<br />
    background: rgba(0,0,0,0.95);<br />
    float: left;<br />
    width: 300px;<br />
    margin-top: 5px;<br />
    padding: 10px;<br />
    font-size: 0.8em;<br />
    border: solid 1px lightgrey; }<br />
.videolistControl.close::after{display:none!important}</p>
<p></p>
<p><span style="text-decoration: underline;"><strong>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 )</strong></span></p>
<p><!-- SHOW CHANNEL VIDEOS IN PLAYER --><br />
<script><br />
x$("<div></div>").attr('class','videolistControl').prependTo('.sourceContainer');<br />
x$("<div></div>").attr('class','videolist').appendTo('.videolistControl');<br />
x$( ".feedListPage .module-body" ).clone(true).appendTo('.videolist');<br />
x$('.videolist').hide();<br />
</script><br />
<br />
<script><br />
x$(".videolistControl").click(function(){<br />
x$('.videolist').slideToggle(300);<br />
x$(this).toggleClass('close');<br />
});<br />
</script><br />
<script><br />
x$('a.closer.pull-right.feedListPagePlayer-close').click(function(){<br />
x$(".videolistControl").removeClass('close');<br />
x$('.videolist').hide();<br />
});<br />
</script></p>
<p></p>
<p>Enjoy, John :-)</p>
<p></p>
<p></p>
</div>All The Code I used To Create My Social Channels Playerhttps://creators.ning.com/forum/topics/all-the-code-i-used-to-create-my-social-channels-player2016-12-31T21:59:15.000Z2016-12-31T21:59:15.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Here is all the code I used for changing how my social channels player looks. Rather than open a small player at the top of the site I created a much bigger player that covers the screen, also when viewed from a social channels page rather than one in a tabContainer you get the option in the top right corner of the player to show more videos from the page of which you can click on to play. When this is viewed in mobile view you still get this option and you just slide the video along to view more in the list.</p>
<p>The pagination ( ie Next , Previous page options ) now rather than small arrows the actual wording appears also.</p>
<p>When viewed in a tabContainer the more videos drop down is not shown as there is only a few videos on the page to show.</p>
<p>The player will default to this style no matter where you add video channels. To see it working you can go to my site and select the Social Channels tab on the main nav menu and this will show you the tabContainer version. If you hover over the tab in the menu this will give you the two main social channels pages to view how it looks there. Or use the links added below. When there just click a video to see it play in the new version player design.</p>
<p>Tab Container Social Channels: <a href="http://bizzssite.ning.com/social-channels-tabs" target="_blank">http://bizzssite.ning.com/social-channels-tabs</a></p>
<p>Normal Social Channel Page: <a href="http://bizzssite.ning.com/star-wars" target="_blank">http://bizzssite.ning.com/star-wars</a></p>
<p>CODE NEEDED BELOW.</p>
<p>/** CSS CODE TO ADD TO YOUR CUSTOM CSS SECTION **/</p>
<p>/********** FEED LIST PLAYER **********/<br />
<br />
@media only screen and (min-width:771px){<br />
a.feedListPagePlayer-close,a.feedListPagePlayer-close:hover{font-size:25px;margin-bottom:10px }}<br />
<br />
.feedListPagePlayer { background-color: rgba(0, 0, 0, 0.82); height:100%}<br />
.feedListPagePlayer .sourceContainer{ border: 1px solid rgb(54, 54, 54);background-color:rgba(0, 0, 0, 0.4);}<br />
<br />
/*Sizing The Playing Video*/<br />
@media only screen and ( min-width:481px){<br />
.feedListPagePlayer-source {height:100vh; width:95vw;margin:auto;padding-bottom:1em}<br />
.feedListPagePlayer-source iframe {<br />
    max-width: 85vw;<br />
    height: 80vh;<br />
        width: 100%;}<br />
.feedListPagePlayer-source .nav {font-size:3em}<br />
}<br />
<br />
/* Adjust social page nav to go above the video inline with the close button*/<br />
@media only screen and (max-width:771px){<br />
.feedListPagePlayer-source >.cf{ float:right!important; }<br />
.feedListPagePlayer-source .nav{ width:auto!important;top:0%;margin-top:0px;font-size:2em;padding:0px}<br />
.feedListPagePlayer-source .navNext{margin-right:0.7em!important}}<br />
<br />
/* Replaces the max width of 400px for the list page */<br />
@media only screen and (min-width:959px){<br />
.feedListPage-item.matrix-itemFluid { max-width: 100%;}}<br />
<br />
@media only screen and ( max-width:769px){<br />
.feedListPage-item.matrix-itemFluid {width:50%;}}<br />
<br />
.feedListPage-itemTitle {overflow:hidden;padding:.2em 0.5em;line-height:1.28;height:4.2em;max-height:4.2em;font-size:1.1em;}<br />
<br />
<br />
/** Highlight Videos Colours And Active**/<br />
.feedListPage-item:hover .matrix-item.matrix-sheet{ box-shadow:0px 10px 8px rgba(0,0,0,0.3);border-radius:0px 0px 4px 4px}<br />
.feedListPage-item:hover .feedListPage-itemTitle, .videoActive.feedListPage-item .feedListPage-itemTitle{ color:whitesmoke;background: rgba(169, 0, 0, 0.74);border-radius:0px 0px 4px 4px; }<br />
<br />
/* Pagination on pages, shows the words next previous*/<br />
#feedListPagination.pagination .icon{ display:inline!important; }<br />
#feedListPagination.pagination .icon-next::before{ display:none }<br />
#feedListPagination.pagination .icon-next::after {<br />
    content: "";<br />
}<br />
<br />
#feedListPagination.pagination .icon-next::after {<br />
    font-family: "ning-icon-fonts";<br />
    font-style: normal;<br />
    font-weight: normal;<br />
    font-variant: normal;<br />
    text-transform: none;<br />
    line-height: 1;<br />
    display: inline-block;<br />
    margin-left: 0.5em;<br />
}<br />
#feedListPagination a.pagination-previous{ margin-right:10px}<br />
#feedListPagination a.pagination-next{ margin-left:10px }<br />
#feedListPagination a.pagination-previous:hover{text-decoration:none}<br />
#feedListPagination a.pagination-next:hover{text-decoration:none}<br />
#feedListPagination .pagination .is-disabled{ display:none }<br />
#feedListPagination{ margin-top:15px }<br />
<br />
<br />
/*** VIDEO LIST UNDER THE VIDEO PLAYER ***/<br />
<br />
/** SHOW VIDEOS LIST ON PLAYER **/<br />
@media only screen and ( max-width:481px){<br />
.videolistControl {<br />
position:relative!important;<br />
}}<br />
<br />
.videolistControl:before { content:"More Videos";display:block;color:white }<br />
.videolistControl {<br />
position:absolute;<br />
height: 45px;width:65px;<br />
background-color:rgba(40, 32, 66, 0.84);<br />
padding: 4px;<br />
cursor:pointer;<br />
border-radius: 0px 0px 4px 0px;<br />
}<br />
.videolistControl:hover, .videolistControl:focus{<br />
background-color:rgb(69, 27, 16);<br />
}<br />
.videolistControl.close:before { content:"Close Videos";display:block;color:white }<br />
.videolist .feedListPage-item.matrix-itemFluid {<br />
max-width: 200px;<br />
}<br />
.videolist .matrix-item.matrix-sheet{<br />
border: solid 1px #565252;<br />
background-color: #4e4040;<br />
padding: 4px;<br />
border-radius:0px 0px 4px 4px;<br />
}<br />
.feedListPagePlayer-source .videolist .feedListPage-itemTitle{<br />
overflow:hidden;<br />
padding:0.1em 0.2em;<br />
line-height:1.1em;<br />
height:3.58em;<br />
max-height:3.58em;<br />
font-size:12px;<br />
color:whitesmoke;<br />
}<br />
.videolist .matrix-item.matrix-sheet:hover{<br />
background-color: darkgrey;<br />
}<br />
.videolist .matrix-item.matrix-sheet:hover .feedListPage-itemTitle{<br />
background-color: rgba(169, 0, 0, 0.74);<br />
}<br />
.videolist{<br />
position: absolute;<br />
margin-top:50px;<br />
width: 94.9vw;<br />
background: rgba(0, 0, 0, 0.91) none repeat scroll 0% 0%;<br />
overflow-x: auto;<br />
overflow-y: hidden;<br />
border-bottom: solid 1px #666;<br />
}<br />
.videolist .module-body {<br />
padding: 0px 5px 10px 5px;<br />
width: 2400px;<br />
}<br />
.videolist #feedListPagination{<br />
display:none;<br />
 }<br />
.tabContainerSection-pane .videolistControl{ display:none }<br />
.section-channel .videolistControl{ display:none }<br />
<br />
@media only screen and ( min-width:771px ){<br />
.sourceContainer:hover .videolistControl::after { position: absolute; top: -50px; left: -50px;display:block}}<br />
.videolistControl::after {<br />
    display:none;<br />
    content: "View More Videos By Clicking More Videos Box";<br />
    margin-left: 52px;<br />
    color: #d7d7d7;<br />
    background: rgba(0,0,0,0.95);<br />
    float: left;<br />
    width: 300px;<br />
    margin-top: 5px;<br />
    padding: 10px;<br />
    font-size: 0.8em;<br />
    border: solid 1px lightgrey; }<br />
.videolistControl.close::after{display:none!important}</p>
<p>/*** END CSS CODE FOR SOCIAL CHANNEL PLAYER **/</p>
<p><span style="text-decoration: underline;"><strong>CODE TO BE ADDED TO YOUR CUSTOM CODE END OF PAGE SECTION ( DO NOT COPY THIS LINE )</strong></span></p>
<p><!-- SHOW CHANNEL VIDEOS IN PLAYER --><br />
<script><br />
x$("<div></div>").attr('class','videolistControl').prependTo('.sourceContainer');<br />
x$("<div></div>").attr('class','videolist').appendTo('.videolistControl');<br />
x$( ".feedListPage .module-body" ).clone(true).appendTo('.videolist');<br />
x$('.videolist').hide();<br />
</script><br />
<br />
<script><br />
x$(".videolistControl").click(function(){<br />
x$('.videolist').slideToggle(300);<br />
x$(this).toggleClass('close');<br />
});<br />
</script><br />
<script><br />
x$('a.closer.pull-right.feedListPagePlayer-close').click(function(){<br />
x$(".videolistControl").removeClass('close');<br />
x$('.videolist').hide();<br />
});<br />
</script></p>
<p></p>
<p></p>
</div>How To Get The Social Channels Working In Tab Containershttps://creators.ning.com/forum/topics/how-to-get-the-social-channels-working-in-tab-containers2016-12-23T16:02:09.000Z2016-12-23T16:02:09.000ZBizz ( John )https://creators.ning.com/members/Bizz<div><p>Let's say you have some social channel pages but you would like to add a TabContainer on another page for example and that by using the add content insert certain social channels into a tabContainer. Now that is all pretty easy to do as it's just like adding other content to tabContainer but there is an issue when playing videos from other tabs in the tabcontainer except for the first one tab.</p>
<p>What happens is you click on a second tab then click on a video and you will hear the video playing but not see it, if you click back on the first tab you will see the video. So there seems to be a bit of a bug in the original code that Ning has done. Maybe this is something that the New Ning team could look into so in the mean time here is some code for you to use.</p>
<p>The code goes in your end of page custom code box.</p>
<p>Here is a link so you can see the tab container working: <a href="http://bizzssite.ning.com/social-channels-tabs" target="_blank">http://bizzssite.ning.com/social-channels-tabs</a></p>
<p>By the way you may notice my video player looks a little different and this is some custom code and css I used to get them to look like that and will post all that code for you soon.</p>
<p><!-- GET SOCIAL CHANNELS IN TAB CONTAINERS WORKING FIX --><br />
<script><br />
x$('.tabContainerSection-pane.section-channel ').addClass('otherpanes');<br />
x$('.tabContainerSection-pane.section-channel:first').removeClass('otherpanes');<br />
x$(".tabContainerSection-pane.section-channel.otherpanes .matrix-itemFluid.matrix-itemFrame.feedListPage-item").click(function(){<br />
x$(".tabContainerSection-pane.section-channel:first").show();<br />
x$('.tabContainerSection-pane.section-channel:first .matrix.row').hide();<br />
x$('.tabContainerSection-pane.section-channel:first .module-footer').hide();<br />
x$(".tabContainerSection-pane.section-channel").parents().find('li.tabContainerSection-tab:nth-child(1)').addClass('navtabOne');<br />
x$("li.tabContainerSection-tab:nth-child(1).navtabOne").click(function(){<br />
x$(".tabContainerSection-pane.section-channel:first .matrix.row ").show();<br />
x$('.tabContainerSection-pane.section-channel:first .module-footer').show();<br />
});<br />
});<br />
</script><br />
<!-- END SOCIAL CHANNELS IN TABCONTAINERS FIX --></p>
</div>