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

FORUM

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

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

Thisisbully replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Good luck"
3 hours ago
Steve C replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Thank you, Ning! I was about to cry to Support again about how much I need to move to 3.0, and beg…"
8 hours ago
Marco Westerhof replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Sure: www.reefz.nl
Although it is primarily in Dutch, feel free to look at the setup. We work with…"
8 hours ago
Gerard Nealy replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Any chance of live stream?"
8 hours ago
Elshara Silverheart replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Well done Ning! the storage implementation sounds like a really cool idea. Perhaps a list of the mo…"
8 hours ago
Elshara Silverheart replied to Gavin Brown's discussion
Text Editor Problems
"Do you have a ning 2 or 3 network?"
8 hours ago
Elshara Silverheart replied to Gavin Brown's discussion
Text Editor Problems
"I think the change itself may be caused by how Tinymce handles the plugins required to add said fun…"
8 hours ago
Elshara Silverheart replied to Gavin Brown's discussion
Text Editor Problems
"this seems like normal behavior. So making sure tinymce gets called as soon as possible may make th…"
8 hours ago
Ning via Facebook

Improve your community every day! It's easier to say than to do, right? But not for…

Paul B Thomas replied to Gavin Brown's discussion
Text Editor Problems
"Hi I have similar issues at the moment. Cannot upload pictures, an error mesages comes up when I tr…"
10 hours ago
Gavin Brown replied to Gavin Brown's discussion
Text Editor Problems
"Thank you Kyryl
 "
11 hours ago
Traddie replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Marco. Can you tell me what your network url is so that I can have a look at it. Tks"
11 hours ago
More…

Meanwhile, you can check our social media channels