Full Screen Responsive Iframes for Ning Networks

posted Jul 5, 2014, 2:38 PM by Jaybird Farrow [ updated Aug 12, 2014, 3:39 PM by justin b farrow ]

Share This!

Making Iframes responsive in Ning

Who wants full screen, responsive Iframes solution for their Ning Site? I know I have for a while. What I am going to show you all today is something I've been trying to figure out for around 5 years, but finally sat down and hammered it out. This solution works for both Ning 2.0 and Ning 3.0 Networks, but in slightly different ways. You can use it to embed Member maps (maps in general), other pages, Google Sites, you name it! I'll go through both so that everyone can give it a try regardless of the platform. Let's Begin.

Full Screen Iframes Ning 2.0
How to embed Full Screen iFrames for Ning 2.0
In order to make this work, you mist be adding an iframe to a Page (can be a page in a group) because they have the option of adding code to the <head> of page. You'll want to first add this block of code to that "Custom" section.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

   <meta name="viewport" content="width=device-width, initial-scale=1">
   <script>
            document.getElementsByTagName("html")[0].className = "js";
   </script>

<link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632rm*RRGcdOHUd2yajCj7k5tIhs4C68gtOPXI2MKao24gjiqROqJQzQoy*t17zaaT01VA883XpwFusCEC3CQUTRw/normalize.css">

    <link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632pjSDZ5Zs2aEK6Nj*I3R9IzR2lTtUS5QnhU4jo9eytH3ChObmLrpVp75AdvLdd0hMTVHJAwpW2crdWeYxZ6-T00/style.css" media="screen" type="text/css" />
Now you'll want to add this code to your actual page inside the text box, replacing the red url with the one you are iframing into the page:

<script type="text/javascript">                 document.getElementsByTagName("html")[0].className = "js";     </script>
<div class="wrapper"> <div class="iframe"><iframe src="http://yoursiteiframe.com/index.html">
</iframe>
</div>
</div>

<script src='http://api.ning.com:80/files/oto4-hHdKDFkXL8wxgOrQ0bf-m4WeqeUtHVL8VJoPEnHKDr2HT8SyAzc0rG0ZQBdLxm-wDOu8bI1HfQ8XlvIHHV1FVP2yXRo/jquery.js' type="text/javascript"> </script>
<script src="http://api.ning.com:80/files/FsV0PLw632ohjNV4Ru1gJuSEkQsLL9ZozcyU3gHPo6QHyMFZBUv99tSO6dvHdpe6fgZFs*SSrOLRMQsbxyhfUIKha3CE4OJM/index.js" type="text/javascript"> </script>
Demo Using a Google Sites Page

Full Screen Responsive Iframes for Ning 3.0

How to add Full Screen iFrames for Ning 3.0

Now in 3.0, as with most things related to code, it is much simpler to get it working with less headache. Take a look at this full block of code which can be added to one HTML module inside Sites & Pages or as a custom page inside a Group.

<p><link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632rm*RRGcdOHUd2yajCj7k5tIhs4C68gtOPXI2MKao24gjiqROqJQzQoy*t17zaaT01VA883XpwFusCEC3CQUTRw/normalize.css" /> <link rel="stylesheet" href="http://api.ning.com:80/files/FsV0PLw632pjSDZ5Zs2aEK6Nj*I3R9IzR2lTtUS5QnhU4jo9eytH3ChObmLrpVp75AdvLdd0hMTVHJAwpW2crdWeYxZ6-T00/style.css" media="screen" type="text/css" /></p>
<meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript"> document.getElementsByTagName("html")[0].className = "js";
</script>
<div class="wrapper">
<div class="iframe"><iframe width="100%" height="240" src="http://yoursiteiframe.com/index.html"></iframe></div>
</div>
<script src="http://api.ning.com:80/files/oto4-hHdKDFkXL8wxgOrQ0bf-m4WeqeUtHVL8VJoPEnHKDr2HT8SyAzc0rG0ZQBdLxm-wDOu8bI1HfQ8XlvIHHV1FVP2yXRo/jquery.js" type="text/javascript"></script>
<script src="http://api.ning.com:80/files/FsV0PLw632ohjNV4Ru1gJuSEkQsLL9ZozcyU3gHPo6QHyMFZBUv99tSO6dvHdpe6fgZFs*SSrOLRMQsbxyhfUIKha3CE4OJM/index.js" type="text/javascript"></script>

Demo of Full Screen Iframe Map from Fusion Tables