Skip to main content

Embedding Responsive iframes in your Drupal site

Implementing iframe elements can be troublesome for both content editors and developers, that's even before trying to make them responsive. After some recent project work I'm here to tell you there is an easy way to handle them.

by Nick Schuch /

Components

Responsive child page

For this project the child page was themed so it was already responsive and fit the entire width of the page so it would work with any iframe size.

The initial setup is straight forward:

  1. Download Link iframe formatter module and enable.
  2. Assign a link field to a content type so the content editor doesn't have to worry about markup.
  3. Setup the display of the link field to "Link iframe formatter"

We now have the initial ground work complete. Now comes the fun part, making the iframe responsive.

Responsive iframes libraray

For our recent project we chose the Responsive iframes library. It's simple (the code can be read through in about 5min) and initial implementation is very simple.

  1. <!-- Activate responsiveness in the "child" page -->
  2. <script src="/js/jquery.responsiveiframe.js"></script>
  3. <script>
  4. var ri = responsiveIframe();
  5. ri.allowResponsiveEmbedding();
  6. </script>
  7. <!-- Corresponding code in the "parent" page -->
  8. <script src="/js/jquery.js"></script>
  9. <script src="/js/jquery.responsiveiframe.js"></script>
  10. <script>
  11. ;(function($){
  12. $(function(){
  13. $('#myIframeID').responsiveIframe({ xdomain: '*'});
  14. });
  15. })(jQuery);
  16. </script>

Note: The above was taken from the Responsive iframe project page.

Issues we had to overcome

Page elements updating

Responsive iframe library triggers a resize when the screen size changes. With this in mind we ran into an issue where the child (the page we are displaying in the iframe) would have elements update and add additional height, causing elements to disappear in the borders of the iframe. After reading through the library and some googling I ended up with the following solution. The following is javascript that is added to the child page. It watches for changes in the DOM and sends notifications to the parent.

// When fields are updated (invalid content).
$('form').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
  ri.messageParent();
})

Disable scrolling to top of page

By default, if the iframe size updates the parent page scrolls to the top, we don't want that. After reading through the code I was able to use the following as a solution on the parents end:

$("#myIframeID").responsiveIframe({ scrollToTop: false });

Note: This is an update to the existing javascript.

How to determine if the child page is in an iframe

We had a requirement to set some css for the child iframe. In this case we only wanted to set the style when the child was in the iframe. Since we cannot set css from the parent, we came up with the following solution.

if (window.self != window.top) {
  $("html").css('overflow' , 'hidden');
}

Conclusion

Here are some simple elements that ended up making the project work a success. Please let me know approaches you have taken in the comments below.

Posted by Nick Schuch
Sys Ops Lead

Dated

Comments

Comment by Murray

Dated

Thanks Nick. Some hard won knowledge there. Nice to see contrib and jQuery working together like that. Thanks for sharing.

Comment by Mohtadi Bakali

Dated

Hello Nick,
I am usisng Drupal 7, my theme is responsive_green, i am trying to use google map inside iframe but the thing is not responsive in all diferentet screen size. Thank you very much

Comment by Kelly

Dated

I am working on a druap page using boostrap business theme and I am needing the iframes to resize (like bootstrap does) when browswer window changes. I have downloaded the jquery.responsiveIframe.js, added your fixes above (to the end of the js code) and enabled the Link iframe formatter module. I created content, entered url into link field and it shows the iframe but it is overlapping in some areas and not resizing. Some of my iframes will be crossdomain. Any Help :)

Comment by Geoff

Dated

I have tried to use the code for when the iframe page content updates thereby changing the document height, but nothing happens. In my case I have a link with a bit of jquery where onclick it shows a div below it increasing the height of the page. Nothing happens. In my console, the jquery.show doesn't seem to fire any of those dom events. Any ideas? Thanks.

Comment by Wouter

Dated

Very cool. How can I use this code in a non Drupal environment?

Pagination

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Not sure where to start? Try typing "hello" or "help" if you get stuck.