Title: Syntax to include an iframe
Last modified: October 23, 2018

---

# Syntax to include an iframe

 *  Resolved [Trebly](https://wordpress.org/support/users/trebly/)
 * (@trebly)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/syntax-to-include-an-iframe/)
 * Hi,
 * I just begin using fancyBox in a new context.
    Then I have to modify the soft
   to hold iframes. I search for clear information on how to define a alink for 
   easyfancy for an iframe. I have not found any example (more running ?). Where
   I can find such example and linked instructions.
 * Best regards
    Trebly

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/syntax-to-include-an-iframe/#post-10807394)
 * Hi [@trebly](https://wordpress.org/support/users/trebly/), do you wish to show
   another web page inside the light box? Then go to Settings > Media and enable
   the iFrame option. Then, after saving, there is a new section at the bottom called
   iFrame. Here you can set some defaults that work best for your site. Note the
   text there that mentions the class name “fancybox-iframe” that should be used
   for this content type.
 * To create a link on your site that opens its target in an iframe light box, first
   create a basic link to that target in your post/page editor. Then switch from
   View to Text tab in the editor and find the link code. It should look like
 *     ```
       <a href="_your_external_url_">link text or image</a>
       ```
   
 * No add the snippet `class="fancybox-iframe"` so it will look like:
 *     ```
       <a class="fancybox-iframe" href="_your_external_url_">link text or image</a>
       ```
   
 * Then save the page/post and visit your front to test the result.
 *  Thread Starter [Trebly](https://wordpress.org/support/users/trebly/)
 * (@trebly)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/syntax-to-include-an-iframe/#post-10807966)
 * HYi,
    Thanks, they remain some important problems.
 * The syntax is
 *     ```
       <a href="https://www.facebook.com/.../posts/..1290182" class="fancybox-iframe">
       Link to iframe source
       <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2...%2Fposts%...290182&width=500" width="500" height="707" style="border:none;overflow:hidden " scrolling="yes" frameborder="1" allowTransparency="true" allow="encrypted-media"></iframe></a>
       ```
   
 * This produces :
    - If I don’t add the text “Link to iframe source” there is no clickable zone
      into the iframe
    - The click opens the link into a new tab, and when you switch to the previous
      current tab
    - You get an empty lightbox
 * Important, I meet another problem with images, the image is too opened into a
   new tab but the image is displayed into the fancybox.
 * The iframe and images are displayed into boxes of “colorbox” plugin.
    I would
   intend to develop a way to display the boxes into fancybox or elements of their
   content (the purpose of this message). for now
 * What can I check ?
    Note : I have no problem with js,html,css development and
   debug mode (chrome). Note: I used a while to check the content of the light box(
   fancybox-wrap) and I think that I found a major cause of the problem : EasyFancy
   rebuilds the iframe using the main href of alink and facebook seems to refuse
   and send nothing while with the upward syntax of the link colorbox receives a
   good code. I am going to perform some complementary test
 * Best regards
 * Trebly
 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/syntax-to-include-an-iframe/#post-10808077)
 * Ehm… OK, several problems:
 * 1. better not use two light box plugins/scripts at the same time.
 * 2. do not place an iframe tag inside a link tag
 * If you want to open some external web page inside the light box, you should have
   HTML code like this:
 *     ```
       <a class="fancybox-iframe" href="_your_external_url_">link text</a>
       ```
   
 * or like this:
 *     ```
       <a class="fancybox-iframe" href="_your_external_url_"><img src="..." /></a>
       ```
   
 * (first shows text, the second an image that is linked to the external page)
 * 3. it seems you are linking to a Facebook post and I’m pretty sure Facebook will
   not allow you to embed single posts in a light box… It would explain why your
   click opens in a new tab.
 *  Thread Starter [Trebly](https://wordpress.org/support/users/trebly/)
 * (@trebly)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/syntax-to-include-an-iframe/#post-10809619)
 * Hi,
 * I answer to your questions and recommendations here.
    But I will try to explain
   in another way what I want to do and what I mean.
 * I have a site page (with colorbox which shows partialy several iframe which can
   be reduced and/or truncated or miniaturized. So I want to bring the same iframe,
   each one separately, into a light box well sized with easy FancyBox.
 * This is possible, even it is a facebook item, the html instruction which function
   has
    the following code which is first generated by js of Easy Fancybox and slighly
   manually modified (with debugger) is :
 *     ```
       <div id="fancybox-wrap" style="width: 500px;height: auto;top: 1652px;left: 241px;display: block;">
         <div id="fancybox-outer">
           <div class="fancybox-bg" id="fancybox-bg-n"></div>
           ....
           <div id="fancybox-content" style="border-width: 1px;width: 500px;height: 744px;">
             <THE IFRAME ..... >
           </div>
           ...
         </div> 
       </div>
       ```
   
 * note : I just change the width of divs and the src of the iframe from the nearest
   result obtained
 * My question is how to generate original html content to display the result which
   is able to display the same content than the iframe into a light box well sized.
 * **There are two syntax to get the nearest result from the target :**
    - Simple link with class fancybox-
    -     ```
          <a href="https://www.facebook.com/anne.tachene/posts/10218047851290182" class="fancybox-iframe">
          Open here the item facebook (this text is added because the iframe is not clickable)<br>
          <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fanne.tachene%2Fposts%2F10218047851290182&width=500" width="500" height="707" style="border:none;overflow:hidden " scrolling="yes" frameborder="1" allowTransparency="true" allow="encrypted-media">
          </iframe>
          </a>
          ```
      
    - Quite the same give the same result by close A tag before the iframe, the 
      difference is for analyse by js,
 * I explain :
    both
    - Open a new tab on the facebook item in the current user context of facebook(
      logged in)
    - Open a light box into the previous tab from which we have started. **But this
      fancybox is empty**
 * So regardless the purpose there to errors :
    - Empty Fancybox
    - the facebook item is opened into a new tab while we are waiting a fancybox
      popup on the current tab. Long complex, bad ergonomy and no interest
 * Why the fancybox is empty ?
    Because the link used is not the link of the item
   as it is into the iframe, it is cleaned and compressed. Into the iframe generated
   by Easy Fancybox to populate the box we need to use the extended src, as defined
   upwards, for the iframe.
 * I checked this, by a manual change into the code generated by using debogger,
   and it function perfectly. We have just to be full perfect to adjust the width
   of the container at the with of the query of the url.
 * Note that if you send from console the command :
    `window.open(“extend full url
   with width of your choice”) you get a new tab with the right content.
 * So for Facebook and may be many other sites there are little adaptations to perform
   into the script for iframes.
    The fact that the soft ignores the iframe into 
   the first syntax can be useful for the analyse to get the full url and the width
   parameter which can be adapted at the available width.
 * Must I go to js code to do this ?
 * Best regards
 * Trebly
 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [7 years, 7 months ago](https://wordpress.org/support/topic/syntax-to-include-an-iframe/#post-10820742)
 * Hi, I can only repeat my previous statements:
    1. Please do not put an IFRAME
   tag inside an A tag. It’s just not valid code. 2. An URL like [https://www.facebook.com/anne.tachene/posts/10218047851290182](https://www.facebook.com/anne.tachene/posts/10218047851290182)
   can not be embedded in an iframe (or light box) because of: `Refused to display'
   https://www.facebook.com/anne.tachene/posts/10218047851290182' in a frame because
   it set 'X-Frame-Options' to 'deny'.` (see you debugger console)
 * If you wish to embed in the light box (same as embedding in an iframe) then use
   the URL as you already use in the iframe: [https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fanne.tachene%2Fposts%2F10218047851290182&width=500](https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fanne.tachene%2Fposts%2F10218047851290182&width=500)
 * You may adapt this URL with a different width=xxx at the end to make it fit the
   light box.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Syntax to include an iframe’ is closed to new replies.

 * ![](https://ps.w.org/easy-fancybox/assets/icon-256x256.png?rev=3188201)
 * [Firelight Lightbox](https://wordpress.org/plugins/easy-fancybox/)
 * [Support Threads](https://wordpress.org/support/plugin/easy-fancybox/)
 * [Active Topics](https://wordpress.org/support/plugin/easy-fancybox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/easy-fancybox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/easy-fancybox/reviews/)

## Tags

 * [iframe](https://wordpress.org/support/topic-tag/iframe/)

 * 5 replies
 * 2 participants
 * Last reply from: [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * Last activity: [7 years, 7 months ago](https://wordpress.org/support/topic/syntax-to-include-an-iframe/#post-10820742)
 * Status: resolved