Tip: Resize your Social Channels Video

[Bizz]

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

Example here: https://jr-images.ning.com/katkam-social-channel

Just add this css to your design studio css

 

/*** RESIZE THE VIDEO IN SOCIAL CHANNELS ****/
@media only screen and (min-width:979px){
.feedListPagePlayer-source .sourceContainer {
display: flex;
align-items: center;
width: 100%;
height: 70vh;
max-width: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}

[Alex - Rosas † Negras]

thank you very much my Master

[⚡JFarrow⌁]

awesome... thanks Bizz!

[Bizz]

Your welcome JF :-)

[Scott Bishop]

I'd love to see your example page but your link above is broken. Do you still have it? Thanks. 

[Bizz]

Just go to my site here https://jr-images.ning.com/ and from the nav menu go to the videos page or the social channels video pages

[Scott Bishop]

Looks great! I'm just trying out N3 for the 1st time so I feel like a newbie again. 
I tried out your code and pasted it to my Custom CSS > Global CSS, is that correct because there also an option for Theme CSS? 

Anyways it didn't work. I was wondering if you could have a quick look and see if I missed something: https://surfershot2.ning.com/videos/airwave-the-worlds-first-inflat...

[Bizz]

The difference between the Global and Theme CSS is this;

Global means any css added to that section will work accross all themes so if you decide to change themes that css will still be there.

Theme css means it will only work on the current theme so if you decide to change themes any css added to that section will not be in the new theme.

Basically I tend to use both as once I have chosen a theme it's rare to then change but if I do it's just a matter of copying out the theme css and then past it back or just copy it over to the global then move it after the change. I use global for all my css which affects the majority of the site which I want as default then use the theme side for additional custom sections of css. It's just a handy way of keeping the code organised.

You can if you want put all your css in either side as it all works the same.

The css above in this post is just for social channels video pages, for your main videos to be responsive then you need to add the other codes:

MAIN VIDEO PAGES CODE

This first part goes in your Social Site Builder > Custom Code > End Of Page Section ( do not include this line )

<script>
// Video And Photos Additional Classes
x$(document).ready(function(){
x$('.videoDetailPage').closest('body').addClass('isVideoDetailPage');
});
</script>
<script>
//If videos are iframed then css makes them responsive
x$(document).ready(function() {
if (x$('.videoDetailPage-video iframe').length > 0) {
x$('.videoDetailPage-video').addClass('iframed');
}
});
</script>

 

NEXT PART IS THE CSS, THIS GOES IN YOUR DESIGN STUDIO CUSTOM CSS ( DO NOT COPY THIS LINE WITH THE CODE )

 

/************** VIDEOS CODES ************/

@media only screen and (min-width:771px){
/* Adjust the Column Widths Video Detail Page */
.videoDetailPage .span8{ width:80% }
.videoDetailPage-list { margin:0px }
.videoDetailPage .span6{ width:20%}
.videoDetailPage .matrix-itemFluid { min-width: 80%;max-width:100%; float:none }
.videoDetailPage .span6 .matrix-itemFluid { width: 80%; margin: 0px auto; }
.videoDetailPage-titleList { text-align:center; font-size:1.1em }
.videoDetailPage .icon-love{display:inline;vertical-align:bottom;}
}

/* Add a title to the video description */
.videoDetailPage-mainVideo >.entry-content::before{content:"About"; display:block; margin-bottom:5px; text-decoration:underline }
.videoDetailPage-viewVideo .icon-eye{vertical-align:bottom;display:inline;margin-right:0px;}
.videoDetailPage-otherVideo .videoListPage-metaTitle{ font-size:12px!important }
.videoForm-inputTitle { height: auto;}
.videoDetailPage-mainVideo .standard-comments.entry-comments::before{content:"Comment";display:block;margin-bottom:5px; text-decoration:underline}

/* Make video Responsive */
.videoDetailPage-video.iframed{
margin-bottom: 5px;
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
}
.videoDetailPage-video.iframed iframe{
max-width: 100%;
height: 100%;
width:100%;
position: absolute;
}

 

[Scott Bishop]

Stoked! It worked perfectly. 

Thanks for the info too. That will help me down the road. 

[Bizz]

Great, no worries glad to help Scott 👍