iframe Documentation

Embedding a Video

To embed a YouTube or Vimeo video or any content from these sources, consider these instructions:

To embed content from the above sources, you need only copy and paste the URL into your page or post. WordPress will automatically embed the content. The images below demonstrate this process.

image of youtube url in wordpress editing box

image of youtube video in wordpress editing box

Using iframe

To embed content from any other external source, consider these instructions:

The iframe plugin enables you to embed content into WordPress from external sources such as Timeline JS, Sketchfab, and Google Suite.

Three basic elements together build the basic iframe shortcode.

  1. the iframe tag:'
<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe 0="...." src="http://www.youtube.com/embed/4qsGTXLnmKs" width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
'
  2. the source; the link to the content (not the embed code!):'
<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe src="...." width="100%" height="500" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
' 
  3. additional display preference parameters; such as width, height, scrolling preferences, borders, margins, styles outlined here

All iframe shortcode is contained within brackets and begins with the iframe tag. The ‘src=’ asks you to specify the source of the embedded content. The default width is 100% and the default height is 500. You may change the height in the iframe shortcode or the height of the content itself to ensure that the height of the content matches the height in the iframe shortcode.

Example format below:


<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe src=""link" 0="to" 1="content"" width=""100%"" height=""500"" scrolling="yes" class="iframe-class" frameborder="0"></iframe>

 

 

The example below demonstrates the process of embedding a timeline from Timeline JS into a WordPress page.

 

 

image of the link and embed codes provided by Timeline Js with an arrow pointing to the link box

 

After you have crafted your timeline, the next step is to embed the link to the timeline into WordPress.
image of the Timeline JS url in the WordPress editing box.

 

 

 

First, copy and paste the link offered by Timeline JS into your WordPress page.

 

 

image of the Timeline JS url with the beginning of the iframe shortcode ( [iframe src= ) above

 

Next, start to build the iframe shortcode around the link to the timeline. The source in this case is the link provided by Timeline JS.

 

 

Next, insert the link of your timeline into the iframe shortcode with quotation marks around the link. Then add the width and height of the content as you wish to have it appear in your page, as demonstrated in the screenshot below and the iframe bracket example at the top of this page.


image of fully integrated iframe shortcode with embedded link from Timeline JS. 
<!-- iframe plugin v.4.3 wordpress.org/plugins/iframe/ -->
<iframe src=""https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1tzl0ELMPUKLaXJ-RwW_Df8tRZ0D4FqIJawsh5HmRkeU&font=Default&lang=en&initial_zoom=2&height=500"" width=""100%"" height=""500"" scrolling="yes" class="iframe-class" frameborder="0"></iframe>

 

 

 

The default height for the iframe shortcode is 500, but the default height for timelines by Timeline JS is 650. In this case, I chose to change the height of the timeline within Timeline JS to 500 to match what was specified in the iframe shortcode.

 

 

While the iframe shortcode will appear as the written framework in your Dashboard on WordPress, the content will appear as it should when visitors look at your webpage. For example, this is how my timeline appears on my WordPress page.

 

 

For more information on how to construct iframe shortcode and it’s potential uses, please visit these pages:

Trinity College iframe Documentation 
WordPress iframe Documentation
wpbeginner iframe Documentation