iframes in Wordpress

Question

I am trying to generate some embeddable iframe code so a user can include the code on a blog to display content I'm planning to deliver. Right now the content I'm trying to deliver is just a website. I am trying to use the following code on a Wordpress blog:

<iframe width="420" height="315" src="http://www.cnn.com" frameborder="0"></iframe>

However when the page is viewed Wordpress simply outputs a link for "http://www.cnn.com" based on the following html.

<a href="http://www.cnn.com">http://www.cnn.com</a>

That said, if I use Youtube generated iframe code, the iframe loads fine. For example:

<iframe width="420" height="315" src="http://www.youtube.com/embed/_OBlgSz8sSM" frameborder="0" allowfullscreen></iframe>

results in:

<iframe class='youtube-player' type='text/html' width='420' height='315' src='http://www.youtube.com/embed/_OBlgSz8sSM?version=3&#038;rel=1&#038;fs=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' frameborder='0'></iframe>

Any idea what Youtube is doing to enable this functionality or more generally how to get my simply iframe to work.

I not trying to load google or another search engine in the iframe that was just an example. I simply want to load a webpage in the iframe but wordpress keep giving me the anchor. I have updated the code to include ww.cnn.com as an example. — weber, Jun 08 '12 at 14:31

scessor · Answer 1 · 2012-06-08T18:58:06.657

I don't know why you get an anchor instead of the iframe, but I know that google don't want their homepage in iframes. If you would have an iframe with the src http://www.google.com, you would see an empty iframe. Also see this example.

=== UPDATE ===

Wordpress prohibits iframes with few exceptions. Probably you can handle it with shortcodes. Try adding following untested code into the functions.php in your theme.

// [iframe src="www.cnn.com"]
function iframe_func($atts) {
    extract(shortcode_atts(array(
        'src' => 'default'
    ), $atts));
    return '<iframe src="{$src}"></iframe>';
}
add_shortcode('iframe', 'iframe_func');

Now you can add [iframe src="www.cnn.com"] in the article editor in the wordpress admin.

Inputting the variables the way this answer does works for me http://stackoverflow.com/a/10956037/4047679 — raphael, Feb 11 '16 at 22:04

score 3 · Answer 2 · answered Jun 08 '12 at 21:05

Creating a shortcode is the way I get around this problem. It bypasses the WYSIWYG editor and puts the html in the page.

I would approach it like this.

Add this to your functions.php file:

function add_iframe($atts) {
    extract(shortcode_atts(array(
    'src' => '/'
    ), $atts));
  $theframe = '<iframe src="'.$src.'" width="420" height="315" frameborder="0"></iframe>';
  return $theframe;
}
add_shortcode('iframe', 'add_iframe');

Useage:

Add [iframe src=http://thesiteyouwanttoshow.com] to the content where you want the iframe to show.

can you please show an example of this ,because i am facing the same issue. and please let me know how to append this iframe code with my iframe url — Ankit Agrawal, Dec 17 '18 at 13:46

score 2 · Answer 3 · edited May 23 '17 at 11:44

If you are loading your own web page within the iframe remember that most hosted solutions will have xFrame options set to SAMEORIGIN, so no matter what you change in Wordpress, the page will still not render as it is being blocked by the target website.

I spent hours with this problem so hopefully if you are having this issue you will the target website as well. If you are hosting a solution on rails the answer I found is here and a website that will definitely load in Wordpress can be found here, so feel free to use that endpoint as a test.

score 0 · Answer 4 · answered Jun 08 '12 at 13:58

0

Google uses the X-Frame-Options header (set to SAMEORIGIN) to prevent you from placing it in an iframe. Getting around this would require the user to use a browser that doesn't support X-Frame-Options.

answered Jun 08 '12 at 13:58

ceejayoz

176,543
40
303
368

score 0 · Answer 5 · answered Jun 08 '12 at 14:07

Unfortunately the major search engine sites such as google and yahoo (bing excluded) don't allow for iframe embedding since they offer a plethora of APIs and integration options. So there is really no real way for you to do this. If you are not planning on embedding google as your iframe source then you should be in the clear with the current code that you have in place. Try it out and just change the source to something else - google will not show up in its place. If you want a search engine there unfortunately it is with horror that I say that bing is the only one that works.

Hope this helps!

So in recap - Google does not embed in iframe, but other content that you produce should based on your coding: example:

<iframe width="420" height="315" src="http://www.uncrate.com" frameborder="0"></iframe>

http://jsfiddle.net/pKby8/

The Anchor that you get is a result of the xFrame option. When it connects to the google servers the servers kick back a cute response hinting that you should link to them instead of iframe.

thanks for the input, sorry for the confusing example but I am not trying to load a search engine just a webpage. When I try your example code Wordpress again only loads the anchor, despite that fact that it works in jsfiddle.net. Any suggestions? — weber, Jun 08 '12 at 14:34
Where is the web page located? Are you using absolute addressing, or if it is hosted in your own server is it relative?Have you considered using a plugin if this does not work? Plugin that I would recommend is http://wordpress.org/extend/plugins/iframe/ uses a simple short code — Andrew, Jun 08 '12 at 21:41

score 0 · Answer 6 · answered Jun 08 '12 at 14:52

0

I would create a WordPress short_code that would insert your iFrame in the output. I think by adding the iFrame code directly in the post box wordpress is changing it.

http://codex.wordpress.org/Shortcode_API

answered Jun 08 '12 at 14:52

Nick

1,157
1
8
13

iframes in Wordpress

6 Answers6

Linked