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

  • 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

Suzie Nielsen replied to J.Ayvar's discussion
When Activity Feed. 3.0?
"How do I get these? THanks in advance!
 "
2 hours ago
Angela Soto updated their profile
19 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Tip: Build a Directory and Import It Into Your Community
"Opposite Trick/ Tip"
21 hours ago
⚡JFarrow⌁ posted a discussion
If you ever wondered what your community looks like in the mirror, here you go: :oƃ noʎ ǝɹǝɥ…
21 hours ago
Steve C replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Exactly!"
21 hours ago
⚡JFarrow⌁ replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if your N2 is migrated to a N3, one would think a backup could be made for you...no?"
22 hours ago
⚡JFarrow⌁ posted a discussion
Over the years, many Ning Creators have asked me the best way to build a directory for their…
yesterday
Roland Rupp updated their profile
Thursday
Gavin Brown and ⚡JFarrow⌁ are now friends
NC for Hire
Thursday
Rosas † Negras left a comment on Creatori NING Italiani
"La grafica è elementare e le attività nulle,sarebbe da lavorarci un Po,sono da oltre 15 su ning…"
Wednesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"if you check this has been said there is a discussion, all for free and they think of everything"
Tuesday
Rosas † Negras replied to Steve C's discussion
Is there ANY way to export a Ning 2 Site?
"Yes,absolutely must be free as has been said, I have been on ning for 15 years and we have always…"
Tuesday
More…

Meanwhile, you can check our social media channels