Using iFrames to Embed an App to WordPress

Written by Tinjure WP Posted on

Note: This post of understanding newly added WordPress Site Editor features including using blocks. This learning post is still in active development and updated regularly.

We often like to share large video files, online tutorials, or even other people’s content on our websites. <iFrame> allows users to share such large contents on their websites.

In this learning-note post, I would like to explore more about the <iFrame> and how to use it on a WordPress site.

What is <iFrame>?

iFrame contains HTML content, such as a link to a website, which is enclosed inside the iFrame tag. Following is an example of how to embed a Word Camp US 2023 YouTube video.

<iframe width="700" height="360" src="https://www.youtube.com/embed/VeigCZuxnfY" title="Matt Mullenweg: State of the Word 2022" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
iFrame Parameters?

If you look at the code snippets above, there are a few parameters added beside the site’s URL.  A few common ones include:

  • Width: allows user to specify a specific width of the iFrame in pixels.
  • Height: allows users to define size or the height of the iFrame window in pixels.
  • Allow: This setting allows users to set up default behavior of the iFrame window such as full-screen viewing.
  • Importance: This option allows users to specify when an iFrame should load.

In the code snippet above, the window size is set to 700 pixels by 360 pixels, with full-width viewing and auto-play enabled. This MDN Doc provides a list of additional parameters that can be added within an iFrame tag.

Using iFrame in classic theme

To embed the video in a classic WordPress theme, like this site, you just need to copy the YouTube video URL that we get from right-clicking on our mouse.

https://youtu.be/VeigCZuxnfY

The above code will display the following YouTube video.

In block themes, we can embed such social media using the embed block. This list of embed blocks provides additional information, as does this list of sites where users can embed content on a site.

Using iFrame with Block Editor

To use iFrame in block themes using Post Editor or Site Editor, we should use custom HTML block.

To access the custom HTML block, search the block from the block inserter tab, and select the Custom HTML block (see below)

Next, insert the embed iFrame code available from the YouTube media file. In the example below, the embed code snippets from Matt’s State of the Word 2022 YouTube video are placed in the HTML window of the custom HML block.

The preview tab next to the HTML will display the same State of the Word 2022 YouTube video as shown in the preceding section.

And that’s about it!

This Kinsta tutorial describes an additional use case for iFrame blocks on a WordPress site.

Related resource links