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

Alessandro replied to Daniel Overman's discussion
Setting up a product catalog or database
"I used groups module for this purpose, I created about 4.800 groups until now, each group is a "pro…"
2 hours ago
Ning via Facebook

Do you have podcasts that you have created for your community? Maybe you are keen on music or…

Kyryl_Ning_Support replied to Daniel Overman's discussion
Setting up a product catalog or database
"Hi there!
You may try to use one of the modules for example blog for this purpose. The body could c…"
9 hours ago
Kyryl_Ning_Support replied to francisco's discussion
Adsense policy violation on member profile edit page
"Hi there!
If you are using Ning 2.0, unfortunately, there is no inbuilt way to control the modules…"
10 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion
SSL certificate feature release
"Hi there!
Sure we can generate CSR for you, however, it would be faster if you do it by yourself. G…"
10 hours ago
Kyryl_Ning_Support replied to Dan Hennings's discussion
How do I find CSS?
"Hi Dan,
You can use the Chrome inspector or dev tools in the FireFox, to see the structure of the s…"
11 hours ago
Ken Conrey, Vinnie Doan, jessica and 15 more joined Ning Creators Social Network
11 hours ago
More…

Meanwhile, you can check our social media channels