Iframe tags in TinyMCE editor and Drupal 7.x

Submitted by Nicola Rainiero on 2015-04-12 (last updated on 2017-01-31)

TinyMCE is a fantastic WYSIWYG editor available also for Drupal 7.x, but it does not support the iframe tag, or in a simple word if you try to embed a video, map, or an external web page you can see HTML code magically disappear. Fortunately the WYSIWYG IFrames module solves completely the problem and with a fix it is possible to maintain the allowfullscreen feature of the YouTube videos. Here is a few instructions and a screencast that simplify the whole process.

Recently I have been a little worried while I was embedding an iframe tag in my last article. Generally I used to write the article using Full HTML text format (where I choose TinyMCE1 3.3.9.4 as the default client side editor) and only at the end I switch in PHP code mode to embed that HTML tag and save the node, for ever! If I switch text format again, the element disappears, so it is wearying for three reasons:

  • I forget that TyniMCE doesn’t support it and I see it only after the publication;
  • I like use a WYSWYG editor and TinyMCE gives me a lot of interesting features to simplify the writing;
  • editing an article in PHP Code (for insert something new or fix my mistakes) requires more time above all if the original node is written before in Full HTML (TinyMCE compresses all the white spaces).

Iframe tags in TinyMCE editor and Drupal 7.x

Why do people still use iframes?

If you make a simple search on Internet, you can find a lot of debating about this tag and a lot of people that hates it. But there are plenty of technical reasons to use it, above all to embed and isolate third-party content into a website. Below there are some examples.

In My traffic surveys app using jQuery Mobile article I used an external html page in a window to show my webapp, putting the following code:

<iframe src="../../sites/default/files/webapp/Traffic_Surveys/Traffic_Surveys.html" width="400" height="320" frameborder="1" scrolling="auto"></iframe>

Idem when I have to embed a Slideshare presentation:

<iframe src="http://www.slideshare.net/slideshow/embed_code/46422192?startSlide=1" width="510" height="420" frameborder="0" scrolling="no"> </iframe>

Or an ArcGIS map:

<iframe src="http://arcg.is/1GU022r" width="900" height="600" frameborder="0" scrolling="no"> </iframe>

Of rather a YouTtube video:

<iframe width="420" height="315" src="https://www.youtube.com/embed/2fs-Mchr5Vk" frameborder="0" allowfullscreen></iframe>

Acyually TinyMCE offers the media plugins that solves the problem for FLASH video and introduces an easy-to-use pop up window (showed in the pictures below). But it works only with video content, and if you edit the source, you obtain this code:

<object width="420" height="305" data="https://youtu.be/2fs-Mchr5Vk" type="application/x-shockwave-flash"><param name="src" value="https://youtu.be/2fs-Mchr5Vk" /></object>
  • How to enable the media plugins (in /admin/config/content/wysiwyg/profile/full_html/edit)

    How to enable the media plugins

  • How the media plugins work

    How the media plugins work

  • The advanced panel of media plugins

    The advanced panel of media plugins

 

The solution: WYSIWYG IFrames module

As you can see above, there are many contents that you could embed in your articles and thanks to this article: Drupal - add iframe in tinymce editor, I have discovered the existence of WYSIWYG IFrames module, that allows to add the iframe tags directly into the editor (by pasting the code in the HTML Source Editor button, after enabling the Source code feature in the Wysiwyg profiles). I did a simple screencast, in which it is possible to see the installation, settings and how it works. Surely it is useless for an intermediate user of Drupal, but I have created this also to study the basis of the screencast in Ubuntu (knowledge that might be practical in the future).


My screencast video on YouTube

 

A trick to enable the allowfullscreen attribute

The module previously installed, does not support the allowfullscreen attribute, so the only way to embed YouTube videos with this feature is to edit the ../sites/all/modules/wysiwyg-iframes/wysiwyg_iframe.module file by changing the original:

[...]
array('iframe[src|width|height|frameborder|scrolling]'),
[...]

In:

[...]
array('iframe[src|width|height|frameborder|scrolling|allowfullscreen]'),
[...]

And when you embed the iframe by changing the paste code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/0dg1IDTXY_E" frameborder="0" allowfullscreen></iframe>

In:

<iframe width="560" height="315" src="https://www.youtube.com/embed/0dg1IDTXY_E" frameborder="0" allowfullscreen="1"></iframe>

This is the only way that I found to allow the fullscreen attribute, if you don't add a value, it disappear as usual.

 

And for now that is really all folks!

  • 1. TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL. TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.



Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.