Embedding YouTube video with new iframe embed code in TinyMCE

Question

I tried the old embed code for adding YouTube videos into TinyMCE and it works fine. Some of the users may not realise they have to click on the old embed code option in YouTube embed code link to add it in.

I want to make it easy for users and allow them to just copy the new embed code directly and paste it on TinyMCE and away they go.

The new embed code looks like the following example:

<iframe title="YouTube video player" width="640" height="390" 
        src="http://www.youtube.com/embed/VvJ037b_kLs" 
        frameborder="0" allowfullscreen></iframe> 

How do I get TinyMCE to accept the new version of the YouTube embed code with iframe?

I'm working on a CakePHP site build.

Solution 1

I think that the use of "extended_valid_elements" is better than edit the original settings.

See that: TinyMCS - extended_valid_elements

Solution 2

By default TinyMCE will filter out iframe tag for security reasons. You can add this tag and its attributes to the allowed list of html elements.

See http://tinymce.moxiecode.com/wiki.php/Configuration:valid_elements

Default rule set:

tinyMCE.init({
        // ... other configurations
        valid_elements : "@[id|class|style|title|dir<ltr?rtl|lang|xml::lang|onclick|ondblclick|"
+ "onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|"
+ "onkeydown|onkeyup],a[rel|rev|charset|hreflang|tabindex|accesskey|type|"
+ "name|href|target|title|class|onfocus|onblur],strong/b,em/i,strike,u,"
+ "#p,-ol[type|compact],-ul[type|compact],-li,br,img[longdesc|usemap|"
+ "src|border|alt=|title|hspace|vspace|width|height|align],-sub,-sup,"
+ "-blockquote,-table[border=0|cellspacing|cellpadding|width|frame|rules|"
+ "height|align|summary|bgcolor|background|bordercolor],-tr[rowspan|width|"
+ "height|align|valign|bgcolor|background|bordercolor],tbody,thead,tfoot,"
+ "#td[colspan|rowspan|width|height|align|valign|bgcolor|background|bordercolor"
+ "|scope],#th[colspan|rowspan|width|height|align|valign|scope],caption,-div,"
+ "-span,-code,-pre,address,-h1,-h2,-h3,-h4,-h5,-h6,hr[size|noshade],-font[face"
+ "|size|color],dd,dl,dt,cite,abbr,acronym,del[datetime|cite],ins[datetime|cite],"
+ "object[classid|width|height|codebase|*],param[name|value|_value],embed[type|width"
+ "|height|src|*],script[src|type],map[name],area[shape|coords|href|alt|target],bdo,"
+ "button,col[align|char|charoff|span|valign|width],colgroup[align|char|charoff|span|"
+ "valign|width],dfn,fieldset,form[action|accept|accept-charset|enctype|method],"
+ "input[accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value],"
+ "kbd,label[for],legend,noscript,optgroup[label|disabled],option[disabled|label|selected|value],"
+ "q[cite],samp,select[disabled|multiple|name|size],small,"
+ "textarea[cols|rows|disabled|name|readonly],tt,var,big"
});

add the following to the end of the list

,iframe[src|title|width|height|allowfullscreen|frameborder]

I would not recommend to allow users to embed iframe tag in a public website.

Comments

[George Leow]

Hi thanks !..but what kind of security threat does iframe impose ?

[satrun77]

Links to iframe hack: Google search for iframe hack Iframe Hack