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

NOTE: This applies to streaming videos like YouTube etc and not videos members directly upload to your site.

Resize Your Videos And Make then responsive. Applies to Video Pages And Groups Video Pages. Also Social Channels

DEMOS

Social Channels: https://jr-images.ning.com/anna-rudolf

Video Page: https://jr-images.ning.com/videos

 

CODE FOR SOCIAL CHANNELS, CSS GOES INTO YOUR DESIGN STUDIO CUSTOM 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%);
}
}
@media only screen and (max-width:979px){
.feedListPagePlayer-source .sourceContainer {
top:30%;
}}

 

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;
}

 

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

  • Do you know if this will work on N2 sites? 

    • Not this code as all the class names and layout of N3 are different than 2, it could probably be re-written to fit 2. I don't own a 2 anymore so not wrote it for 2 as not able to test it.

  • NC for Hire

    8413087061?profile=RESIZE_930x

    into Rosas I can't get it to work, sure I did something wrong
  • NC for Hire

    my videos are uploaded, no link from yutube, maybe this is the problem?

    • Yes it will only work with youtube etc and not uploaded videos. The reason is that uploaded videos are resampled down by Ning to a certain size so when you try to make them bigger they loose quality.

  • This is cool but I just realized there's no commenting area. 

    • On social channel pages there is no option for commenting as it's just bascially streaming the list of videos from that channel page. If adding them to an actual video page by linking or embedding then there is commenting.

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 replied to ⚡JFarrow⌁'s discussion
Trick N3.0: How to Change the Color of Your Green Ning Bar with CSS
"thanks for the codes, the right side was still green like this add this now is ok, thanks again for…"
1 hour ago
Rosas † Negras replied to Rosas † Negras's discussion
"TIP" the new ultimate NingBar 3.0 !!! inspired by my dear friend George H. Compton IV
"Mystical 
the perfect bar size for 3.0 is 716 x 11,you will no longer have two bars with this size"
8 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
"TIP" the new ultimate NingBar 3.0 !!! inspired by my dear friend George H. Compton IV
"you are welcome, to adapt it to 3.0 it didn't take much for me, it was a fundamental part for…"
8 hours ago
Mystical updated their profile photo
13 hours ago
Mystical replied to George H. Compton IV's discussion
"TIP" the new ultimate NingBar!!! six eye-catching animated colors to choose from update 2
"Thank you so much. I love it and it works great!!"
13 hours ago
Mystical replied to Rosas † Negras's discussion
"TIP" the new ultimate NingBar 3.0 !!! inspired by my dear friend George H. Compton IV
"Thank you George H. compton IV for the code and thank you Rosas Negras for sharing the code. =)"
13 hours ago
Rosas † Negras posted a discussion
17 hours ago
Rosas † Negras replied to Bizz's discussion
NEW Sharing Option I Have Been Working On
"thank you very much for your work and for the help you give to all of us"
22 hours ago
Bizz replied to Bizz's discussion
NEW Sharing Option I Have Been Working On
"Mentions will not work with this as we are using the activity feed and mentions are only available…"
23 hours ago
Rosas † Negras posted a discussion
}.status-container.media-frame{color:#ffffff;font-weight:bold}.quickadd-options…
yesterday
Rosas † Negras posted a discussion
  <script type='text/javascript'>//<![CDATA[ //Substitute URLs to change falling objects var…
yesterday
Rosas † Negras replied to Bizz's discussion
NEW Sharing Option I Have Been Working On
"Bizz  it's wonderful!!! I'm sure you've already tried to integrate in the box mention option ."
yesterday
More…

Meanwhile, you can check our social media channels