How to allow embedding of new Ifame embed code from Youtube and Vimeo

1. Upload the attached file, EmbedIframe.php to DolphinRoot/plugins/htmlpurifier/standalone/HTMLPurifier/Filter/

2. In the file DolphinRoot/inc/utls.inc.php:

Find the code: (Existing Youtube filter commented out, and new filter added)

    // HTML Purifier plugin   
    global $oHtmlPurifier;
    require_once( BX_DIRECTORY_PATH_PLUGINS . 'htmlpurifier/HTMLPurifier.standalone.php' );
    if (!isset($oHtmlPurifier)) {

        HTMLPurifier_Bootstrap::registerAutoload();
       
        $oConfig = HTMLPurifier_Config::createDefault();       

        $oConfig->set('HTML.SafeObject', 'true');
        $oConfig->set('Output.FlashCompat', 'true');
        $oConfig->set('HTML.FlashAllowFullScreen', 'true');

        $oConfig->set('Filter.Custom', array (new HTMLPurifier_Filter_LocalMovie()));
 //       $oConfig->set('Filter.Custom', array (new HTMLPurifier_Filter_YouTube()));
        $oConfig->set('Filter.Custom', array (new HTMLPurifier_Filter_EmbedIframe()));
        $oDef = $oConfig->getHTMLDefinition(true);
        $oDef->addAttribute('a', 'target', 'Enum#_blank,_self,_target,_top');
       
        $oHtmlPurifier = new HTMLPurifier($oConfig);
    }
   
    return $oHtmlPurifier->purify($val);
}

3. In the file, DolphinRoot/templates/base/scripts/BxBaseConfig.php

Find the code:

            paste_remove_styles : false

Replace with:

            paste_remove_styles : false,

            extended_valid_elements: "iframe[class|src|frameborder=0|alt|title|width|height|align|name]"

(Please not, that when the extra line of code is added, that there must be a comma added after the previous line.)

Make backup copies of all files before editing. 

This has been tested with the iframe embed code now used by Youtube and Vimeo.  Modifying BxBaseConfig.php, prevents the TinyMCE editor from stripping out Iframe code.  This shouldn't be a problem, since HTMLPurifier will clean the code before posting.  The new HTMLPurifier filter will allow ONLY iframe code from the Youtube and Vimeo domains.... all other attempted uses of the iframe tag should still be stripped out by htmlpurifier.

Disclaimer:  Use this modification at your own risk.  If making this change causes your whole site to blow up, or to be made vulnerable to hacking by Al Qaeda, don't blame me

In both of  the Files:

modules/boonex/forum/layout/base/xsl/canvas_init.xsl

modules/boonex/forum/layout/base_en/xsl/canvas_init.xsl

Find:

            extended_valid_elements : "a[name|href|target|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|obj|param|embed],object[type|allowScriptAccess|allowNetworking|height|width|data],param[name|value|],embed[src|width|height|bgcolor|type|pluginspage|flashvars|scale|AllowScriptAccess|wmode]"
            });

Add the code in red:

            extended_valid_elements : "iframe[class|src|frameborder=0|alt|title|width|height|align|name],a[name|href|target|title|onclick],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|obj|param|embed],object[type|allowScriptAccess|allowNetworking|height|width|data],param[name|value|],embed[src|width|height|bgcolor|type|pluginspage|flashvars|scale|AllowScriptAccess|wmode]"
            });

NOTE:  Ii the unlikely event you have a canvas_init.xsl in any custom forum templates, you must make these edits in those files as well.

UPDATE: I forgot to mention that there are four instances of the edits to the TinyMCE init event in BxBaseConfig.php

As you indicated... I also had to make the 4 TinyMCE changes to the BxTemplConfig.php file in the tmpl_uni/scripts folder.  Didn't work before (on my site) but does work after the extra file update. 

Thank you for sharing your often *excellent* ideas with others on the forum... very much appreciated.

Not sure why you'd have to modify any BxTemplConfig.php files, unless they were altered to include the TinyMCE init events.

 I just checked another Dolphin site of mine... you're right, it's not usual for TinyMCE code to be there.  As I remember it, about 4 month ago I purchased a module that required changes to it.  Being a newbie I figured it was okay.  The site seems to be working 'okay'.

this works, however, when I embed a youtube video, it refreshes in the content window where as a vimeo does not.

I have not poked around int he filter yet, but I wonder if it's an issue with the new filter code not refreshing in the editor window.

Once submitted, it displays fine however.

Thanks for any insight on this issue.  :D

 Exactly what do you mean by "refreshes in the content window"?

NM... "content window" = TinyMCE editor

I'm aware of this.  I don't think it has anything to do with the filter, because the filter doesn't do anything until the post is saved

As far as I can tell, when you paste the code from Youtube, you'll see a black div where the iframe has been pasted.   When you paste an iframe from Vimeo, the corresponding div has a white background.  You can't see it, but it's there.  These colors are specified by CSS pulled from Youtube and Vimeo, and there is no way to override it with local CSS, because the local CSS is already loaded when the remote CSS is applied.

Not sure what the folks at Vimeo were thinking

Ahh!  Explains it!  So, I'll just Grey my tinyMC background, maybe that will be less confusing for my users.  lol

Hello Houston!

I've done everything mentioned on this page but I can not run anything.

Where do I paste the embed code?

If I understood correctly, I should paste this code by using the EMBED the video download tool?

This is what I do but the Continue button remains innactif mode!

Sorry for my question. Maybe did I missed something!

 RE:

 No, you don't understand this correctly, if you are asking where to paste the embed code. 

 RE:

 This thread involves modifying Dolphins source files.  Instructions are given on how to do this, and I cannot make them any clearer.  If you do not understand how to do any of this, you should get someone with more Dolphin experience to do it for you.

Hello Houston!

Sorry for the confusion. My English is not really perfect!

As I mentioned in my first message ...

I already did all modifications in each file as mentioned in your instructions.

These changes are intended to give the possibility to paste the embed code (eg YouTube) somewhere no?

I just asking where the embed code must be paste!

1) Into Video module when uploading by choosing EMBED option?

2) In comment box?

3) Or some other place?

Thank again and have a good day!

This thread refers to embedding iframe code from within the TinyMCE editor.

Thank you, Houston. I was trying to figure out how to make TinyMCE work in the event module because the instructions to allow iframes by modifying the code in  administration/js/page_builder_tiny.js only applied to the page builder module. Your fix worked perfectly. Appreciate your post.

This is a great 'fix'!

Hopefully this will also work for 7.1!...

@ HL - Will this work for Blogs too?

Yes it does. Just test on my site. Articles, Blogs, Wall... all fine :-)

Why would I get a

Warning: Cannot modify header information - headers already sent by (output started at /home/flagon/public_html/templates/base/scripts/BxBaseConfig.php:595) in /home/flagon/public_html/inc/design.inc.php on line 133

All I did was add the iframe[class|src|frameborder=0|alt|title|width|height|align|name], to BxBaseConfig.php in only one area; the one where it already has the extended-valid-elements.  I checked to make sure no spaces had  jumped before <?php

Since I followed the steps in order, that was the last file to be changed.  Cleared the all caches in admin as well as in the cache and cache_public directories.

This is a very common problem after editing source files.  Make sure you don't have any white space after the closing php tag in BxBaseConfig.php

EX: That stuff highlighted in yellow, is what you need to delete.  There must NOT be any spaces, or other hidden characters after the closing php tag. 

?>   

Yes, I tried that but will try again, maybe I did not eliminate all white spaces.

Thanks for your help.

[edit] This time to make sure I got the white spaces out I backedspaced all the way including removing the > and then typing it back in and hitting save. I figured it was a white space error but did not see it. Thanks for helping [/edit]

TinyMCE for the blog posts is still stripping out the iframe code.  I guess I need to make sure I have the extended-valid-elements added in all the right places.

Attach a copy of your BxBaseConfig.php file here.

Just checked the page source to see and the tinymce init does not have the extended valid elements on the blog post creation page.

What did you mean about  when editing the utls.inc.php: (Please not, that when the extra line of code is added, that there must be a comma added after the previous line.)  Shouldn't that line in a a semicolon? Or was you referring to the commented out line; it wouldn't need a comma would it?

 RE:

 I never said that about utils.inc.php

OK, that was my confusion   and I did not add any comma after any line.  Thanks for your help with this.  Hopefully I can get it to working correctly with some guidance.

One thing I noticed, is that the BxBaseConfig.phpfile you attached, only has one edit.  If you read this entire thread, it specifically says there are four instances of the edits to this file.

OK, again my confusion.  I just glanced at that file and thought that they were configuring TinyMCE  for different textareas.  I only wanted it for the blog textarea.  I have worked with TinyMNCE for a plugin on the blog/cms project that I am a member of, a true open source no licence project..  Anyway, on that application we developed a TinyMCE plugin just for the blog section

Will add the edit to all sections of that file and see how it works.

Thanks for your help; it is appreciated and I am so new to Dolphin.