{"id":22825,"date":"2021-04-17T17:00:03","date_gmt":"2021-04-17T15:00:03","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=22825"},"modified":"2021-04-16T20:49:15","modified_gmt":"2021-04-16T18:49:15","slug":"how-to-embed-iframe-code-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-embed-iframe-code-in-wordpress\/","title":{"rendered":"How to Embed Iframe Code in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]It\u2019s 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 \u2013 <a href=\"https:\/\/qodeinteractive.com\/magazine\/embed-youtube-video-in-wordpress\/\">embed videos from platforms like YouTube<\/a> or <a href=\"https:\/\/qodeinteractive.com\/magazine\/embed-tiktok-video-in-wordpress\/\">TikTok<\/a>, display social media posts, even <a href=\"https:\/\/qodeinteractive.com\/magazine\/facebook-group-feed-wordpress\/\">embed an entire group feed<\/a> if it\u2019s related to their business. This is regarded as one of the best strategies in social media and <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-content-marketing\/\">content marketing<\/a> that can help you in boosting your online visibility and promoting your brand.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That being said, if you plan to share content that isn\u2019t yours on your site, you\u2019ll want to find the safest possible way to do so. Luckily, <strong>this is precisely where iframes can come into the picture<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This time around, we will talk about iframes and show you how to use them to share content from other platforms on your WordPress site hassle-free, so make sure to read on:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-iframe-and-why-it-is-useful\">What Is Iframe and Why It Is Useful<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-iframe-in-wordpress-using-the-embed-code\">Adding Iframe in WordPress Using the Embed Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#embedding-iframe-with-a-wordpress-plugin\">Embedding Iframe With a WordPress Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#embedding-iframes-in-wordpress-manually\">Embedding Iframes in WordPress Manually<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-iframe-and-why-it-is-useful\"><\/a>What Is Iframe and Why It Is Useful<\/h2>\n<p>[\/vc_column_text][vc_column_text]Simply put, <strong>an iframe is a way to embed different types of content<\/strong> (such as videos, social media posts, maps, and so on) directly on your site <strong>using a specific HTML code<\/strong> \u2013 without having to host any of it yourself. This means you will <strong>get to use this content on your site from an external source without having to worry about it using any of your own storage space<\/strong> or putting any strain on your bandwidth. Another reason why using iframes is great is that<strong> they can help you avoid running into potential copyright-related issues<\/strong>. Plus, if the content you shared this way gets changed in the future, it will automatically be updated on your site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That being said, you should know there are some downsides to using this method as well. Aside from the fact that not all websites will allow you to use an iframe to begin with, there is also a problem of HTTPS websites allowing you to use iframes from other HTTPS websites only. And the same rules apply for HTTP-based sites, too \u2013 if you have an HTTP site, you can only embed iframes from another HTTP site. So, if you plan to use this method, you should keep these in mind.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now, we did mention that you need to use a specific HTML code in order to add an iframe to your site. Do not fret, however, as the process itself isn\u2019t that complicated as it sounds. Here are<strong> three different ways in which you can add iframe to your WordPress site.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-iframe-in-wordpress-using-the-embed-code\"><\/a>Adding Iframe in WordPress Using the Embed Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are plenty of places online that allow you to use the embed option to add iframe to your site. One great example is YouTube, which is why we will demonstrate how you can get the necessary embed code using this popular video-sharing platform.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To find the embed code, simply access a YouTube video you want to share and <strong>click the <em>Share<\/em> button<\/strong> (located right below the video itself).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"610\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Share-Button.jpg\" class=\"attachment-full size-full\" alt=\"Share Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Share-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Share-Button-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Share-Button-768x483.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Share-Button-620x390.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After a new screen opens, you will be able to see the option called <em>Embed<\/em>. You should click on it in order to get the embed code of your video.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Video.jpg\" class=\"attachment-full size-full\" alt=\"Embed Video\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Video.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Video-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Video-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Video-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you do this, you will see that you can mark two different options: <em>Show player controls<\/em> and <em>Enable privacy-enhanced mode<\/em>. We recommend that you <strong>enable both of them<\/strong> (the first one should already be enabled by default).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Options.jpg\" class=\"attachment-full size-full\" alt=\"Embed Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Options-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Options-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Embed-Options-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you can click the <em>Copy<\/em> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"521\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Copy-Embeded-Code.jpg\" class=\"attachment-full size-full\" alt=\"Copy Embeded Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Copy-Embeded-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Copy-Embeded-Code-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Copy-Embeded-Code-768x413.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Copy-Embeded-Code-620x333.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you can go ahead and<strong> paste the code anywhere you want on your page or post.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To embed your iframe code using the Gutenberg block editor, access your desired page or post in your website\u2019s backend (or head to <em>Pages\/Posts &gt;&gt; Add New<\/em> to create a new one). Then, simply <strong>click on the (+) icon and find a <em>Custom HTML<\/em> block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add HTML Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you add this block to the desired area in your editor, simply<strong> paste your YouTube iframe code into the HTML block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Embed-Code.jpg\" class=\"attachment-full size-full\" alt=\"Paste Embed Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Embed-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Embed-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Embed-Code-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Embed-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Save\/update your changes and then go to your site\u2019s frontend to see what your embedded video looks like on your page\/post.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Live-Preview-Embeded-Video.jpg\" class=\"attachment-full size-full\" alt=\"Live Preview Embeded Video\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Live-Preview-Embeded-Video.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Live-Preview-Embeded-Video-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Live-Preview-Embeded-Video-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Live-Preview-Embeded-Video-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To do this in the Classic editor, you need to <strong>switch to <em>Text<\/em> mode<\/strong> within the editor first.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Text-Editing-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Text Editing Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Text-Editing-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Text-Editing-Mode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Text-Editing-Mode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Text-Editing-Mode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, simply paste your code there, save or <em>Update\/Publish<\/em> your page or post, and you\u2019re all done.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 need to go to the specific post you wish to share on your site, and find the embed option in its settings.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"embedding-iframe-with-a-wordpress-plugin\"><\/a>Embedding Iframe With a WordPress Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you use a WordPress plugin called <a href=\"https:\/\/wordpress.org\/plugins\/iframe\/\" target=\"_blank\" rel=\"noopener\">iframe<\/a> to embed your iframe code, you will be able to share any type of content using the plugin\u2019s shortcode.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/iframe.jpg\" class=\"attachment-full size-full\" alt=\"iframe\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/iframe.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/iframe-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/iframe-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/iframe-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing and activating the plugin<\/a>, you will get to use the plugin straight away as it requires no additional setup. So, you can simply access your page or post and <strong>find and add a <em>Shortcode<\/em> block<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-Shortcode-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add Shortcode Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-Shortcode-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-Shortcode-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-Shortcode-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-Shortcode-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can add the following shortcode to your block:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[iframe src=\"Your-URL\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Then, simply <strong>copy your embed code and paste it inside the shortcode.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text] We should note that you don\u2019t have to insert the entire iframe code. Instead, you can simply use the page URL from within the embedded code itself.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Paste Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After that, you can go ahead and preview the way your content looks like live.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"624\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shortcode-Live-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Shortcode Live Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shortcode-Live-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shortcode-Live-Preview-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shortcode-Live-Preview-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Shortcode-Live-Preview-620x399.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In case you wish to use the Classic editor to add your iframe code with this plugin, you can simply <strong>paste your shortcode with the URL directly into your page\/post<\/strong> (without having to use the <em>Text<\/em> view):[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"445\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-Classic-Editor.jpg\" class=\"attachment-full size-full\" alt=\"Paste Shortcode Classic Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-Classic-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-Classic-Editor-300x138.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-Classic-Editor-768x353.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-Shortcode-Classic-Editor-620x285.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are also options to add different parameters to this shortcode that will allow you to further customize the way the embedded content is shown on your page\/post. This includes adjusting the content height and width, displaying it with or without the scrollbar, and plenty more (you can take a look at all the different parameters on the plugin page). [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"embedding-iframes-in-wordpress-manually\"><\/a>Embedding Iframes in WordPress Manually<\/h2>\n<p>[\/vc_column_text][vc_column_text]In case you don\u2019t want to use a plugin, you can always create your iframe code manually. Once again, you should find an HTML block within your editor and add it to any desired area on your page\/post.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/HTML-Block.jpg\" class=\"attachment-full size-full\" alt=\"HTML Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/HTML-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/HTML-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/HTML-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/HTML-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, you should insert the following code into the block:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;iframe src=\"Your-URL\"&gt;&lt;\/iframe&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After that, just go ahead and replace the <em>Your-URL<\/em> part with the direct URL you wish to embed to your page\/post (once again, you don\u2019t have to use the entire embed code, just the URL itself).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe.jpg\" class=\"attachment-full size-full\" alt=\"Paste iframe\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also create your iframe code in the Classic editor using the <em>Text<\/em> mode:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"394\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-Text-Editor.jpg\" class=\"attachment-full size-full\" alt=\"Paste iframe Text Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-Text-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-Text-Editor-300x122.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-Text-Editor-768x312.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Paste-iframe-Text-Editor-620x252.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you can also add some additional parameters in your HTML tag, like set the width and height, allow your content to be displayed in full screen, and so on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here is an example of an iframe code that will allow you to have a screen size that is 500 pixels wide and 300 pixels high, with the enabled fullscreen view:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;iframe src=\"Your-URL\" width=\"500\" height=\"300\" allow=\"fullscreen\"&gt;&lt;\/iframe&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]Using iframe is not only <strong>one of the safest ways to share different types of content<\/strong>, but it also<strong> saves up your storage space<\/strong> as it doesn\u2019t require you to upload any of the files to your WordPress Media Library. No matter if you decide to add your iframe with an embedded code, opt for using a plugin, or prefer to create your code manually, it\u2019s relatively easy to perform each one of these methods. You just need to find the embed URL on the page whose content you wish to share, then follow the specific instructions we shared above, and you\u2019ll be all set.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to learn how to use iframes in WordPress? Stick around as we demonstrate different ways of sharing content from other platforms using the iframe code.<\/p>\n","protected":false},"author":2,"featured_media":22967,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,13],"class_list":["post-22825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/22825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=22825"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/22825\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/22967"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=22825"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=22825"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=22825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}