<iframe> is an HTML tag that specifies an inline frame. This inline frame is used to embed another document within the current HTML document. In WordPress, this can be used to embed one page within another. The page loaded in iframe may also contain HTML scripts and stylesheets such as JavaScript, CSS when the iframe tag is parsed by the user’s browser.
iframe Use in WordPress
iframe is popular among WordPress users since it can be used to embed something from an external source into their WordPress site. Many third-party websites now also provide users with an iframe embed code to insert certain elements into their websites.
iframe is mostly used to embed a video in WordPress from video sharing sites site such as YouTube, Vimeo, Vine, DailyMotion. However, it can also be used to embed content from social media websites such as Twitter, Facebook, Instagram.
How to Embed iframe in WordPress
An iframe can be used in the same way in WordPress as you do in an HTML document. An example of this can be the following embed code from YouTube.
In the example above, the iframe HTML tag loads the YouTube video associated with the ID provided in the code. There are other parameters in it such as width, height, frameborder etc. These parameters are used by the script that loads the YouTube video.
When you are adding iframe code to your website, you need to make sure that you only embed content from a reliable source. Otherwise, it might be possible for hackers to create a backdoor to your WordPress site by loading malicious scripts.
How to Add iframe with WordPress Plugins
There are some plugins available for WordPress that allow you to insert iframe code into your website.
iframe By webvitaly
iframe plugin provides a simple iframe shortcode that allows you to embed any content in iframe.
The iframe shortcode also supports other parameters that are supported by the iframe HTML tag.
- src – The source of the iframe
- width – The width of the content. The value can either be in pixels or in percentage. For example, width=”100%” or width=”600″. The default is width=”100%”.
- height – The height of the content in pixels. For example, height=”500″. The default is height=”500″.
- scrolling – This determines whether or not to display scrollbars. For example, scrolling=”no”. The default is scrolling=”yes”.
- frameborder – This determines whether or not to display a border. For example, frameborder=”0″. The default is frameborder=”0″.
- marginheight – This determines the top and bottom margins of the content. For example, marginheight=”0″. This is not enabled by default;
- marginwidth – This determines the left and right margins of the content. For example, marginwidth=”0″. This is not enabled by default.
- allowtransparency – This allows you to set transparency of the iframe. For example, allowtransparency=”true”. This is not enabled by default.
- id – This allows you to add an id for the iframe. For example, id=”custom_id”. This is not enabled by default.
- class – This allows you to add a class for the iframe. For example, class=”custom_class”. The default is class=”iframe-class”.
- style – This allows you to add custom css styles to the iframe. For example, style=”margin-left:-30px;”.
- same_height_as – This allows you to set the same height of iframe as the target element. For example, same_height_as=”div.sidebar”, same_height_as=”div#content”, same_height_as=”body”, same_height_as=”html”.
- any_other_param – This allows to add custom parameters to the iframe. For example, any_other_param=”any_value”.
- any_other_empty_param – This allows you to add new empty parameters such as allowfullscreen to the iframe. For example, any_other_empty_param=”allowfullscreen”.
Advanced iFrame By Michael Dempfle
Advanced iframe plugin allows you to add iframe to your website using the “advanced_iframe” shortcode.
Simple YouTube Embed
Simple YouTube Embed plugin allows you to embed a YouTube video in iframe with a beautiful thumbnail image. All you need to do is copy and paste the URL of the YouTube video page and it takes care of the rest.
Lightbox Ultimate by Tips&Tricks-HQ
Lightbox Ultimate is a popular WordPress plugin for showing iframe content in Lightbox. You can show an external page or a video in a responsive iframe popup using shortcodes.
Lightbox Ultimate plugin page (affiliate link): https://www.tipsandtricks-hq.com/?p=3163?ap_id=naa986
How to Add iframe without WordPress Plugins
WordPress supports oEmbed, a protocol for site A (such as your website) to ask site B (such as YouTube or Twitter) for the HTML needed to embed content from site B. This makes embedding so much easier. All you need to do is copy and paste the URL of the page and WordPress will take care of the rest.
For example, if you want to insert a YouTube video into one of your posts/pages, you just copy and paste the URL of the video page and WordPress will automatically embed the video in iframe.
WordPress has oEmbed support for these websites at the moment:
- Animoto
- Blip
- Cloudup
- CollegeHumor
- DailyMotion
- Flickr
- FunnyOrDie.com
- Hulu
- Imgur
- Issuu
- Kickstarter
- Meetup.com
- Mixcloud
- Photobucket
- PollDaddy
- ReverbNation
- Scribd
- SlideShare
- SmugMug
- SoundCloud
- Speaker Deck
- Spotify
- TED
- Tumblr
- VideoPress
- Vimeo
- Vine
- WordPress plugin directory
- WordPress.tv
- YouTube
If a website supports oEmbed but not supported in WordPress, it’s possible to manually add the URL to the internal whitelist via API.
One thing I really like about this feature is that it makes managing iframe code easier. There is no need for a plugin. You also don’t need to worry about the width since WordPress will automatically resize it to fit the viewport.
