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 188.8.131.52 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).
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>
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]'), [...]
[...] 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>
<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!