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.

Latest Activity

Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Hi there!
We already have such suggestion registered in the system, but the management hasn't made…"
2 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Hi there!
Only number 4 is related to both platforms, all other features would be implemented on 3.…"
3 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Hi there!
1. I do remember this suggestion, you have posted it here before. And I have good news fo…"
3 hours ago
American Energy replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"Will each of the below be available on 2.0?
1. Member ranking system2. E-commerce platform wider de…"
3 hours ago
Ning via Facebook

Do you think that Ning platform should provide opportunities for creating business pages? Share…

Kos replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"If you're using Nings RSS feed (on 3.0), you can display up to 24 items"
6 hours ago
George Daniels, leon van rooyen, Rolf Joho and 46 more joined Ning Creators Social Network
12 hours ago
Badan Barman replied to Kyryl_Ning_Support's discussion
Overview of Q3 and Ning Q4 2017 plan.
"I would like to recommend two features that are crucial for my survival, 1. Provision of displaying…"
14 hours ago
Badan Barman replied to Kyryl_Ning_Support's discussion
Creators, we need your opinion regarding one idea
"I loved the existing way of Inviting the members. Will not recommend a third party not for the cost…"
14 hours ago
Badan Barman replied to Scott Bland's discussion
Should I or shouldn't I?
"Dear Bland, I am here from the year 2008 and I loved the way Ning is moving. Will recommend it full…"
14 hours ago
Ning via Facebook

The law is hard, but it is the law. Do you think that social media marketing laws are too…

Ning via Facebook

A or B? Black or white? Discover why A/B testing is more than simple choice of 2 landing page…

More…

Meanwhile, you can check our social media channels