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.

  • 8413087061?profile=RESIZE_930x

    into Rosas I can't get it to work, sure I did something wrong
  • 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 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

Cindy Dean Mccoy replied to AnGella's discussion
Slow and Painful 2.0 Death
"I migrated to Ning 3 in hopes to get better support.  It is better, but Ning 3 has some major…"
6 hours ago
AnGella updated their profile photo
7 hours ago
Bizz replied to AnGella's discussion
Slow and Painful 2.0 Death
"I'm curious to what is showing up, maybe it's something we could help out on here."
7 hours ago
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"I agree, if they will treat us like this on 2.0 they will do the same on 3.0.  I use Wordpress as…"
7 hours ago
⚡JFarrow⌁ updated their profile photo
8 hours ago
Nancy Marsh replied to AnGella's discussion
Slow and Painful 2.0 Death
"While support denies they're not supporting Ning 2.0 any longer, it's clear that there is no…"
8 hours ago
Nancy Marsh commented on Gerry Regan's blog post Ability to feature and unfeature lost, as is My Network page
"I would suggest finding another platform. Ning doesn't support Ning 2.0 any longer."
8 hours ago
Sharon aka Lady updated their profile
yesterday
Sharon aka Lady liked Chaz's profile
yesterday
Sharon aka Lady liked Rosas † Negras's profile
yesterday
Rosas † Negras updated their profile
yesterday
AnGella updated their profile
Friday
More…

Meanwhile, you can check our social media channels