It’s no secret that content sharing is one of the best ways to get people to engage with your brand and build a solid relationship with potential customers. In fact, website owners do this quite often – embed videos from platforms like YouTube or TikTok, display social media posts, or even embed an entire group feed if it’s relevant to their business. This is considered one of the best strategies in social media and content marketing that can help you increase your online visibility and promote your brand.
However, if you plan to share content on your site that does not belong to you, you will want to find the safest way possible to do so. Fortunately, this is exactly where iframes can come into the picture.
This time, we’ll talk about iframes and show you how to use them to seamlessly share content from other platforms on your WordPress site, so be sure to keep reading:
In simple terms, iframe is a way to embed different types of content (videos, social media posts, maps, etc.) directly on your site using specific HTML code – without having to host any of them yourself. This means you will Use this content on your site from an external source without having to worry about using any of your own storage or any load on your bandwidth. Another reason why using iframes is great is because: they can help you avoid potential copyright issues. In addition, if the content you share in this way changes in the future, it will be automatically updated on your site.
However, you should also know that there are some disadvantages to using this method. Aside from not all websites initially allowing you to use an iframe, there is also the issue that HTTPS websites only allow you to use iframes from other HTTPS websites. The same rules apply for HTTP-based sites – if you have an HTTP site, you can only embed iframes from another HTTP site. So, if you are planning to use this method, you should keep these in mind.
Now, we mentioned that you need to use certain HTML code to add an iframe to your site. However, do not worry as the process itself is not as complicated as it seems. Here Three different ways to add iframes to your WordPress site.
There are many places online that allow you to use the embed option to add iframes to your site. A great example is YouTube, so we will show you how you can get the necessary embed code using this popular video sharing platform.
To find the embed code, you need to access a YouTube video you want to share and click Share button (located just below the video).
After a new screen opens, you will be able to see the option named. bury. You have to click on it to get the embed code of your video.
When you do, you will see that you can tick two different options: Show player controls and Enable privacy enhanced mode. We recommend you enable both (the first should already be enabled by default).
Finally, you can click copy button.
Then you can continue and Paste the code wherever you want on your page or post.
To embed your iframe code using the Gutenberg block editor, access the desired page or publish it on your website backend (or Pages/Posts >> Add New to create a new one). Then simply Click the (+) icon and Custom HTML block.
After adding this block to the desired field in your editor, simply Paste your YouTube iframe code into the HTML block.
Save/update your changes and then go to the front end of your site to see how your embedded video appears on your page/post.
To do this in the Classic editor, you need to: turn text mode first inside the editor.
Then paste your code there, save or Update/Publish your page or post and you are done.
Just like YouTube, many other popular online platforms (like Facebook, Twitter, and Instagram to name a few) offer the option to embed an iframe code. You just have to go to the specific post you want to share on your site and find the embed option in its settings.
If you are using a WordPress plugin called iframe You will be able to share any type of content using the plugin’s shortcode to embed your iframe code.
After installing and activating the plugin, you will immediately start using the plugin as it does not require additional installation. So you can easily access your page or post and find and add Short code block.
You can add the following shortcode to your block:
[iframe src="https://qodeinteractive.com/magazine/how-to-embed-iframe-code-in-wordpress/Your-URL"]
Then simply copy your embed code and paste it inside the shortcode.
We should note that you do not need to enter the entire iframe code. Instead, you can use the page URL from the embedded code itself.
After that, you can go ahead and preview how your content looks live.
If you want to use the Classic editor to add your iframe code with this plugin, Paste your URL and shortcode directly into your page/post (without having to use text opinion):
There are also options to add different parameters to this shortcode that allow you to further customize the way the embedded content is displayed on your page/post. This includes adjusting the height and width of the content, viewing it with or without a scrollbar, and much more (you can browse all the different parameters on the plugin page).
If you don’t want to use a plugin, you can always generate your iframe code manually. Once again, you should find an HTML block in your editor and add it to any desired field on your page/post.
Next, you should add the following code to the block:
<iframe src="https://qodeinteractive.com/magazine/how-to-embed-iframe-code-in-wordpress/Your-URL"></iframe>
After that, go ahead and replace your URL section with the direct URL you want to embed on your page/post (again, you don’t need to use the entire embed code, just the URL itself).
You can also create your iframe code in the Classic editor. text mode:
Finally, you can add some additional parameters to your HTML tag, such as adjusting the width and height, allowing your content to be displayed in full screen.
Here is an example of iframe code that will allow you to have a screen size of 500px wide by 300px high when fullscreen view is enabled:
<iframe src="https://qodeinteractive.com/magazine/how-to-embed-iframe-code-in-wordpress/Your-URL" width="500" height="300" allow="fullscreen"></iframe>
Solution
just use iframe one of the safest ways to share different types of contentbut at the same time saves your storage space because it doesn’t require you to upload any files to your WordPress Media Library. Each of these methods is relatively easy to perform if you decide to embed your iframe in code, prefer to use a plugin, or prefer to generate your code manually. Just find the embed URL on the page whose content you want to share, and then follow the specific instructions we shared above; everything will be ready.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
