Sharing content online is a common practice. You might be stumped, however, when trying to figure out how to incorporate certain kinds of content. Sharing large files or specific items from other websites can be a challenge at times.<\/p>\n\n\n\n
Fortunately, there is a fairly simple web design practice you can employ to display specific types of content on your WordPress website. Using HTML to create Inline Frames (iFrames)<\/a> can make it simpler to share images, videos, and other media online.<\/p>\n\n\n\n In this article, we\u2019ll explore the different uses of iFrames on a website. We\u2019ll also go through the steps for creating iFrames, both manually and with a plugin. Let\u2019s get started! <\/p>\n\n\n\n\n\n When you use an iFrame, you essentially create a little portal on your website that enables content from somewhere else to be viewed. This can be useful in several scenarios.<\/p>\n\n\n\n Using an iFrame means you don\u2019t have to actually host the files you want to display. The content stays in its original location, and can be viewed through the frame on your site. One way this technique can be helpful is when you want to display large files. An iFrame can bring that content onto your website without slowing down its loading speeds.<\/p>\n\n\n\n It\u2019s worth noting that iFrames are the only kind of frame allowed in HTML5<\/a>. There are a variety of different kinds of content you might use them to display, including:\u00a0<\/p>\n\n\n\n When you use iFrames, you can also avoid complicated copyright rules<\/a>. Several courts have ruled that using an iFrame to display copyrighted material does not constitute a copyright infringement in all cases.<\/p>\n\n\n\n A website can also include scripts to prevent its content from being included in an iFrame. However, we recommend always crediting the original creator of any content you use, or seeking legal advice if you\u2019re unsure how to proceed.<\/p>\n\n\n\n One of the easiest ways to employ iFrames on a WordPress website is to use an iFrame plugin. Fortunately, there are several highly-rated options<\/a> to choose from.\u00a0<\/p>\n\n\n\n For our example, we\u2019re going to use the Advanced iFrame<\/a> plugin. It\u2019s flexible, simple to use, and very well-rated:\u00a0<\/p>\n\n\n\n After installing and activating the plugin, you\u2019ll find a new Advanced iFrames<\/em> menu item in your WordPress dashboard. Advanced iFrame has a pretty extensive set of options. You\u2019ll want to start with the Options<\/em> tab, and review the \u201cQuickStart\u201d video: <\/p>\n\n\n\n Then, you can scroll down and review some of the plugin\u2019s options. These are all set up with plenty of helpful explanations and easy-to-select choices: <\/p>\n\n\n\n Advanced iFrames also provides a free iFrame checker<\/a>, which will check any URL you provide to see if it contains scripts that prevent the content from being included in an iFrame. It\u2019s a good idea to run any URL through this tool before using it in an iFrame on your website.\u00a0\u00a0<\/p>\n\n\n\n You\u2019ll want to also review the Basic Settings<\/em> tab. There, you can customize elements of the iFrame such as height, width, and frame borders: <\/p>\n\n\n\n Once you\u2019ve configured the plugin\u2019s settings to meet your needs, you can start using iFrames on your website.<\/p>\n\n\n\n In the WordPress Block Editor, you\u2019ll now have an Advanced iFrames<\/em> block available for use:<\/p>\n\n\n\n If you have trouble finding this block the first time you want to use it, it will be under the Widgets<\/em> category.<\/p>\n\n\n\n Once you click on the Advanced iFrame<\/em> block, it will automatically load with content from the plugin creator\u2019s website. You can configure the block by using the Block<\/em> options on the right-hand side of the page: <\/p>\n\n\n\n There, you can add the URL of the content you want to appear in the iFrame. You\u2019ll also be able to override some of the plugin\u2019s settings if needed. <\/p>\n\n\n\n If you tested your URL with the iFrame checker<\/a>, you should be good to go. It\u2019s always best to preview your changes before you publish your content, however. You should see a live preview of your iFrame as you edit it and make changes.<\/p>\n\n\n\n You can also use the Preview<\/em> option in the upper right-hand corner of your edit window, in order to view the post in the context of your site\u2019s menus and sidebars. <\/p>\n\n\n\n If you don\u2019t want to work with a plugin but still would like to use iFrames, you\u2019re in luck! You can manually apply code to your posts and pages to include iFramed content. <\/p>\n\n\n\n If you want to incorporate content such as a video from YouTube on your website, you\u2019ll need to locate the embed code YouTube provides. You can find this underneath a video by clicking on Share<\/em>.<\/p>\n\n\n\n This will bring up a menu of sharing options. You\u2019ll want to select Embed<\/em> to get the code you need for your iFrame.<\/p>\n\n\n\n A separate window will open with a preview of what the embedded content will look like. You\u2019ll then be able to copy an iFrame code snippet.<\/p>\n\n\n\n You can also check the Start at<\/em> box if you want viewers to automatically begin viewing content at a certain time code.<\/p>\n\n\n\n Next, you\u2019ll go back to your WordPress post and add the Custom HTML<\/em> block. You can find this under the Formatting<\/em> category.<\/p>\n\n\n\n After you add this block to your post, you can simply paste in the embed code you copied from the YouTube page.<\/p>\n\n\n\n Next, you\u2019ll want to make sure the embed is functioning properly and looks the way you want it to. You can click Preview<\/em> in the Custom HTML<\/em> block to see if your iFrame is working.<\/p>\n\n\n\n With that, you\u2019ve successfully placed an iFrame on your website. The same process will work for any platform that provides you with embed codes.<\/p>\n\n\n\n If you\u2019re still not quite happy with the way the iFrame displays on your post or page, you can manually adjust some of the values in the code. It\u2019s recommended that you use Cascading Style Sheets (CSS)<\/a> to fully customize how iFrames appear on your website.\u00a0<\/p>\n\n\n\n The iFrame tag<\/a> allows for a number of custom properties. However, it\u2019s important to note that many of these are no longer supported by HTML5. You will likely need to investigate your theme\u2019s CSS as we mentioned previously, since you may not be able to override certain formatting directly in the Custom HTML<\/em> block.\u00a0\u00a0<\/p>\n\n\n\n When using iFrames, you\u2019ll want to check the framed content regularly. Since you\u2019re opening up a window to content that you may not have any editorial or quality control over, it could cause a problem on your website at any time. <\/p>\n\n\n\n For example, if the video we used in our example is taken down from its YouTube channel, our post would have a broken player in it. This is a bit more obvious than a broken link, as it will leave a visual impact on your website. Checking your iFrame content periodically enables you to change or take down any media that is no longer working.<\/p>\n\n\n\n Using iFrames on your website can keep things running smoothly, while still incorporating rich media and dynamic content. Here at WP Engine, we know the importance of understanding important web design concepts and having access to the best developer resources<\/a> out there.\u00a0<\/p>\n\n\n\n What\u2019s more, we\u2019re committed to helping you provide the best digital experiences to your customers with our premium WordPress hosting<\/a>. We have a diverse selection of fully-managed hosting plans<\/a>, so you can focus on designing beautiful websites!<\/p>\n","protected":false},"excerpt":{"rendered":" Sharing content online is a common practice. You might be stumped, however, when trying to figure out how to incorporate certain kinds of content. Sharing large files or specific items from other websites can be a challenge at times. Fortunately, there is a fairly simple web design practice you can employ to display specific types…<\/span><\/span><\/p>\n","protected":false},"author":177,"featured_media":149656,"template":"","resource-topic":[904],"resource-role":[895,896,906,897,903,1296],"resource-type":[916],"class_list":["post-96401","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\niFrame Uses<\/h2>\n\n\n\n
\n
Using iFrames With a Plugin<\/h2>\n\n\n\n
Step 1: Download and Configure an iFrame plugin<\/h3>\n\n\n\n
Step 2: Use the Advanced iFrame Block<\/h3>\n\n\n\n
Step 3: Preview Your Site<\/h3>\n\n\n\n
Using iFrames Without a Plugin<\/h2>\n\n\n\n
Step 1: Insert an Embed Code<\/h3>\n\n\n\n
Step 2: Customize Your iFrames<\/h3>\n\n\n\n
Step 3: Check Your iFrame Content Regularly<\/h3>\n\n\n\n
Optimize Your Site With WP Engine<\/h2>\n\n\n\n