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

Tip: Resize your Social Channels Video

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

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 1
Email me when people reply –

Replies

  • NC for Hire
    thank you very much my Master
  • NC for Hire

    awesome... thanks Bizz!

    • Your welcome JF :-)

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

    • 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

      jr-images
      jr-images is a social network
      • 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...

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

           

          • Stoked! It worked perfectly. 

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

            • Great, no worries glad to help Scott 👍

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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels