{"id":95712,"date":"2023-10-11T11:12:47","date_gmt":"2023-10-11T11:12:47","guid":{"rendered":"\/tutorials\/?p=95712"},"modified":"2025-04-23T09:25:12","modified_gmt":"2025-04-23T09:25:12","slug":"iframe-into-wordpress","status":"publish","type":"post","link":"\/in\/tutorials\/iframe-into-wordpress","title":{"rendered":"How to Embed iFrame Into WordPress Using a WordPress Block, an iFrame Plugin, and Manually"},"content":{"rendered":"

If you want to insert content from other sites on your WordPress website, embedding an iFrame is one of the easiest methods.<\/p>

With an iFrame, you can display images and videos from sites like YouTube without violating copyright laws. Plus, it enables you to keep your website light and fast.<\/p>

This article will explore three ways to embed an iFrame into WordPress. The most popular method is to embed web content using the HTML block. Alternatively, you can embed iFrames using a plugin or manually.<\/p>

We’ll also discuss reasons why you would want to use iFrame and how it differs from the WordPress Embed block. Let’s get to it!<\/p>

Download all in one WordPress cheat sheet<\/a><\/p>

\n\n\n\n\n\n\n<\/p>

How to Embed iFrame Into WordPress<\/h2>

Here are three easy ways to embed iFrames in WordPress.<\/p>

How to Use the Embed Code and Custom HTML Block<\/h3>

If you want to add WordPress iFrames without a plugin, the simplest approach is to use the embed code. Simply copy and paste the content’s embed code into a WordPress using the Custom HTML block.<\/p>

This method is best for embedding content from social sites like Facebook and YouTube. That’s because some of these platforms restrict embedding iFrames manually.<\/p>

Let’s say you want to embed a YouTube video into your WordPress site. Follow these steps:<\/p>

    \n
  1. Locate the Share <\/strong>button beneath the YouTube video.<\/li>\n<\/ol>
    \n
    \"You<\/a><\/figure><\/div>
      \n
    1. A popup will appear with the different ways you can share the video. Select the Embed <\/strong>option.<\/li>\n<\/ol>
      \n
      \"The<\/a><\/figure><\/div>
        \n
      1. Copy the YouTube iFrame code that appears. You can also define iFrame parameters like the height and width of the content.<\/li>\n<\/ol>
        \n
        \"A<\/a><\/figure><\/div>
          \n
        1. Open the block editor for the post or page that you want to embed the video on your WordPress site<\/a>.<\/li>\n\n\n\n
        2. Click on the + <\/strong>icon to add a new block and select Custom HTML<\/strong>.<\/li>\n\n\n\n
        3. Paste the iFrame code.<\/li>\n\n\n\n
        4. Switch to the Preview <\/strong>tab. The iFrame should now appear.<\/li>\n<\/ol>
          \n
          \"Previewing<\/a><\/figure><\/div>

          You’ll use the same method to embed content from other social sites like Facebook, LinkedIn, Instagram, and Twitter.<\/p>

          How to Embed iFrame by Using a WordPress Plugin<\/h3>

          If you want to add external content to your site regularly, using a plugin might be more convenient. It’s also a great option if you’re unfamiliar with using HTML code<\/a>.<\/p>

          There are plenty of WordPress iFrame plugins to choose from, but Advanced iFrame<\/a> is one of the best.<\/p>

          \n
          \"The<\/a><\/figure><\/div>

          Advanced iFrame gives you more control over the way your iFrame looks. For instance, you can hide areas of the layout, forward parameters to the iFrame, or hide the content until it’s fully loaded.<\/p>

          To get started, install and activate the Advanced iFrame plugin from your WordPress dashboard<\/a>.<\/p>

          Then, go to Advanced iFrame <\/strong>and select the Options <\/strong>tab:<\/p>

          \n
          \"The<\/a><\/figure><\/div>

          Here, you can adjust various configurations, including the display and technical options.<\/p>

          Before embedding the iFrame on your WordPress site, use the plugin’s free iFrame checker<\/a> to see whether the URL contains any scripts that will prevent the content from loading.<\/p>

          \n
          \"The<\/a><\/figure><\/div>

          Once checked, return to the plugin’s Basic Settings <\/strong>tab on your WordPress dashboard.<\/p>

          Scroll down to Url <\/strong>to add the domain. You can also define different values like the content’s height, width, and transparency.<\/p>

          \n
          \"Basic<\/a><\/figure><\/div>

          Click Generate a shortcode for the current settings<\/strong>.<\/p>

          \n
          \"Advanced<\/a><\/figure><\/div>

          Copy the shortcode and paste it into a Shortcode <\/strong>block on any post or page via the block editor. After that, Preview<\/strong> the WordPress page on your website to make sure that the iFrame works as intended.<\/p>

          \n
          \"Preview<\/a><\/figure><\/div>

          How to Use Code to Embed an iFrame Manually<\/h3>

          To embed an iFrame manually, you’ll have to add the opening and closing iFrame HTML tags and the content’s URL to your WordPress site.<\/p>

          The main benefit of this method is that you will have full control over how the iFrame will appear. You can alter the width and height of the iFrame, enable full-screen viewing, or determine when it should load.<\/p>

          Unfortunately, some social sites like Facebook and Instagram disable manual iFrame embedding. You are also limited to content from sites that use the same Hypertext Transfer Protocol<\/a>. In other words, if your website uses HTTPS, you can only embed content from other HTTPS sites.<\/p>

          To get started, add the iFrame code using the Custom HTML<\/strong> block on your WordPress post or page.&<\/p>

          Add the opening and closing HTML tags with the content’s URL sandwiched between them: <\/p>

          <iframe src=”example.com”><\/iframe>. <\/pre>
          It should look something like this:<\/p>
          \n
          \"Adding<\/a><\/figure><\/div>
          If you want to change the width or height, specify the exact dimensions for the iFrame after the URL. For example, let’s set the width to 700px and the height to 900px:<\/p>
          <iframe src=”example.com” width=”700” height=”900” ><\/iframe>.<\/pre>
          Once you’re done customizing the iFrame, preview the result to make sure it looks good. When you’re happy with the result, publish or update your page.<\/p>
          \n
          \"Previewing<\/a><\/figure><\/div>
          Why You Should Use iFrame<\/h2>
          An iFrame is one of the easiest ways to display external content on your own website without violating copyright laws. In other words, it’s a legal and ethical way to share content on your website that was made by others.<\/p>
          iFrames is also useful for embedding videos<\/a> or other large files. Since you don’t have to host the iFrame content in your Media Library<\/a>, you can save storage space on your hosting account.<\/p>
          \"\"<\/a><\/figure>
          Therefore, using iFrames lets you keep your website light and fast, giving visitors an optimal user experience. Since website speed is a key ranking factor, this also helps your site get higher visibility on Google.<\/p>
          \n
          \"An<\/a><\/figure><\/div>
          What Is the Difference Between iFrame and Embed Blocks In WordPress?<\/h2>
          You can share external content on your WordPress site using both iFrames and the Embed blocks, powered by the oEmbed API.<\/p>
          However, iFrame and Embed have key differences. Mainly, they are used for different types of content.<\/p>
          iFrame is best for displaying HTML documents from other sites. You can also customize the content’s appearance.<\/p>
          Meanwhile, Embed can be used to share other content types like PDFs or Flash animations. However, Embed blocks<\/a> only work with specific third-party sites, including YouTube, Vimeo, and Twitter. Facebook and Instagram no longer support the oEmbed API<\/a>.<\/p>
          To use the Embed WordPress block<\/a>, open the editor for a post or page from your WordPress dashboard and select the Embed <\/strong>block.<\/p>
          \n
          \"Adding<\/a><\/figure><\/div>
          Conclusion<\/h2>
          An iFrame is one of the easiest ways to display content from other sources on your website. For example, you can use it to share large audio and video files.<\/p>
          To recap, here are three ways to embed an iFrame into your WordPress website:<\/p>
            \n
          1. Copy the embed iFrame code and paste it into the HTML block.<\/li>\n\n\n\n
          2. Install a WordPress plugin, like Advanced iFrame.<\/li>\n\n\n\n
          3. Edit and add the iFrame HTML code to embed it manually.<\/li>\n<\/ol>
            With iFrames, you’re able to add content from other websites legally and ethically. Plus, you can specify its parameters so that the content appears exactly how you want it.<\/p>
            How to Embed iFrame Into WordPress FAQ<\/h2>
            Now, you know how to embed an iFrame in your WordPress website. However, you might still have questions about the process. In this section, we will answer the most common questions about iFrames.<\/p>
            What Is iFrame?<\/h3> 
            iFrame is a common method for displaying content from external sources on your own site. You can embed an iFrame in WordPress to share content legally and ethically. Plus, since the content isn’t hosted on your website, you can free up storage space and improve WordPress performance.<\/p> <\/div> 
            Can I Make iFrame Embedded Content Responsive?<\/h3> 
            To make iFrames responsive and mobile-friendly, enclose the iFrame in the div container. This will allow the iFrame to automatically resize based on the screen’s width. To do this, add the following to the HTML code: 

            <div class=””container”> <\/div>

            You can also add CSS to the iFrame code:

            .container {
            padding-top: 56.25%;

            The percentage value is useful when embedding YouTube videos to ensure full visibility.<\/p> <\/div> 
            How Do I Embed iFrame Without A Plugin?<\/h3> 
            To use iFrames in WordPress without a plugin, you have two options. First, you can copy and paste the content’s embed iFrame code into a Custom HTML block. Second, you can manually add the HTML iFrame tags between the source URL.<\/p> <\/div> 
            What Are the Alternatives to iFrame?<\/h3> 
            A popular iFrame alternative is the WordPress Embed block. You can also use a plugin like Smash Balloon<\/a> to display external content from social media sites.<\/p> <\/div> <\/div>
            <\/p>\n","protected":false},"excerpt":{"rendered":"
            If you want to insert content from other sites on your WordPress website, embedding an iFrame is one of the easiest methods. With an iFrame, you can display images and videos from sites like YouTube without violating copyright laws. Plus, it enables you to keep your website light and fast. This article will explore three […]<\/p>\n
            Read More…<\/a><\/p>\n","protected":false},"author":76,"featured_media":95714,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","footnotes":""},"categories":[22637,22633],"tags":[],"class_list":["post-95712","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customization-and-design","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/iframe-into-wordpress","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/iframe-into-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/iframe-into-wordpress","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/iframe-into-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/iframe-into-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/iframe-into-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/iframe-into-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/iframe-into-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/95712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/comments?post=95712"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/95712\/revisions"}],"predecessor-version":[{"id":106466,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/posts\/95712\/revisions\/106466"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media\/95714"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/media?parent=95712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/categories?post=95712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/in\/tutorials\/wp-json\/wp\/v2\/tags?post=95712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}