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

UPDATED

Note this is now the new code as the uploaded videos are not in an iframe the first part was affecting the layout slightly for the uploaded videos. This code now checks to see if the video is in an iframe and if so adds a class for the css.

Here is some code to make the videos added to the new video feature responsive in size. This will especially help those videos that have been embeded rather than a link just added.

You can see a demo here: Demo Of Responsive Video

Add some custom code to your site and pages custom code to add a class if iframe exists

<script>
x$(document).ready(function() {
if (x$('.videoDetailPage-video iframe').length > 0) {
x$('.videoDetailPage-video').addClass('iframed');
}
});
</script>

Now add the updated CSS

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

Enjoy

John :-)

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

  • Nice John.  Thank you!

    • Your most welcome Kos :-)

  • Just updated this code 30-03-17

  • NC for Hire

    great tip John!

    • Thanks JF, now this is possible for the videos I have added an interesting feature for the activity feed if you want to check it out, still a work in progress but it's getting there. Go to my site and click on a video in the activity feed to try it out.

      http://bizzssite.ning.com/

      John :-)

      Bizzs Site
      Tips for Ning 3.0 sites
  • Thank you #JohnTheMan. :-)
  • Does it automatically adjust for mobile phones?
    • I fix it. I had to remove other CSS code.
    • Yes it does :-)

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

JAIME DIAZ SALAZAR posted a discussion
Good day to Everyone,I would like to know if somebody can help me out with my site's chat page…
1 hour ago
Rosas † Negras replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"Don impara a lavorare sui codici invece di lamentarti 3.0 È  superiore di gran lunga....prima di…"
Thursday
Tony19 replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"Hello Ana,I had a look at the platform you’re talking about and you’re right, it’s awesome.
It…"
Thursday
Tony19 liked Ana Massien's discussion Possibly Ning 2 or Ning 1.5
Thursday
⚡JFarrow⌁ replied to Ana Massien's discussion
Emoji work in module headers and newsfeed
"anywhere except for inside the HTML itself."
Wednesday
⚡JFarrow⌁ replied to Ana Massien's discussion
Front end edits
"Most likely not"
Wednesday
⚡JFarrow⌁ updated their profile photo
Wednesday
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"Dood we have not even spoke in this thread since June 2020. I don't see why you came to bump it…"
Wednesday
Ana Massien replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"My name is Ana, not Ann. Ning's earlier days, before the 2.0. Some the elgg layouts correspond to…"
Wednesday
Rosas † Negras replied to Ana Massien's discussion
Possibly Ning 2 or Ning 1.5
"De nada"
Tuesday
Ana Massien posted a discussion
  You can add emoji from a browser extension or emojipedia.com (and copy and paste it) into module…
Monday
Ana Massien posted a discussion
For mods and admins, will 3.0 ever be able to have the front end edit buttons like ning 2.0…
Monday
More…

Meanwhile, you can check our social media channels