iFrame Height

We have a site on rampages.us that’s being used for the creation of world language OER modules. They’re using H5P and a variety of media elements with some text to give context etc.

The goal was to be able to embed these pages on another WordPress site that is running PressBooks on another server.

There are two levels of hassle I wished to make go away. I didn’t want them having to go into text view and I didn’t want them to have to guess how big the page was to set the iframe height manually. I started going down the road with a WordPress plugin for iframe resizer but was failing to do something right and got annoyed . . . so I went in multiple other directions.

Given I had control of both sites, I decided I’d make my own little embed code cut/paste element on the source site that’d use a simple shortcode plugin on the destination site.1

The source site got a little element on the PHP end that would show you the embed code box if you were an editor or higher.

if( current_user_can('editor') || current_user_can('administrator') ) {
$url = htmlentities(get_permalink($post->ID));
echo '<button id="copy-embed" class="outcomes">Copy Embed Code</button><input onClick="this.select();" type="text" name="iframe-embed" id="iframe-code" data-url="' . $url . '">';																}

A dab of javascript gets us the height and writes out the iframe details.

var embedBox = document.getElementById('iframe-code');
var url = embedBox.dataset.url;
var height = jQuery( document ).height()+'px';
embedBox.value ='[iframe src="' + url + '" height="' + height + '" width="100%"]'

A bit more javascript gives us a button that will copy it to the clipboard.


var copyButton = document.getElementById('copy-embed');

copyButton.addEventListener("click", copyCode);

function copyCode() {
  var copyText = document.getElementById("iframe-code");
  copyText.select();
  document.execCommand("copy");
}

Now the people can just cut and paste that into the visual editor and it’ll be tall enough to prevent scrolling.


1 I might have been able to do something better with CORS as well but didn’t have any luck after 5 minutes so I moved on.

Comments on this post

No comments.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL