Embedding Youtube videos iframes and [dciframe] shortcode

[Update: revisting this on 2/27/2013 the problem mentioned just below seems to be fixed or otherwise is a non-issue — you can just use iframes directly within wp’s built-in editor with no problems, see e.g. driver-convicted-in-horn-honking-incident, which also by the way wraps the iframe in a div tag — div style=”clear: right; float: right; margin-bottom: 1em; margin-left: 1em;” — and that looks nice ]
There is a bug/feature/problem with wordpress’s built in visual editor (tinyMCE) in that it just goes ahead and removes iframe tags. An iframe tag is used for, among many other things, to embed youtube videos. Another popular usage example is to embed a google map, or calendar.

here is what some youtube embed code might look like:

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

Here are a couple of  good rundowns of what to do here or here.

One way to avoid the problem is to stay in HTML mode (and never Visual mode) when editing.

One solution offered is to use wordpress shortcode functionality. unfortunately this involves editing the functions.php file of the template which sort of stinks because you’d have to remember to do that again for every new theme.

Another way to go is a plugin that messes with what TinyMCE sees as valid. (i loaded this one up and activated it. then i could never figure out how to configure it?? where is “manage”?)

Iframe widget plugin. This uses the code (is this a shortcode?) dciframe, enclosed in square brackets. The contents are simply a url and optionally followed by a comma separated width and height. The whole thing is closed with a slash dciframe code. There are a whole bunch of similar plugins, i’m not sure if one is better than another. Here is an embedded youtube video:


One thought on “Embedding Youtube videos iframes and [dciframe] shortcode”

Comments are closed.