Put simply, an iframe is a container that lets you display another webpage inside your own webpage, without having to host any of its content yourself. All you have to do is specify the source URL and a few display parameters such as the width and height of the container.
You’ve probably encountered an iframe before if you’ve ever tried to embed a video from YouTube or Vimeo.
Caution: You should only embed iframe code from trusted sources. Whoever hosts the embedded site can modify its content at any time, potentially exposing your website’s visitors to dangerous or unsavory content.
An iframe consists of a single, simple HTML element. In its most basic form, it looks like this:
<iframe src="example.com"></iframe>
Change the src attribute to the URL of the webpage you want to display. Note that if your site uses HTTPS, so too must the source URL; and likewise for HTTP.
Besides the source URL, two other attributes you may want to adjust are width and height. These can be specified in exact pixel values or percentages. We usually recommend setting width="100%" and manually specifying the height. So, your iframe code would look like this:
<iframe src="example.com" width="100%" height="600px"></iframe>
If you want more flexibility with the height, you can wrap the iframe in a div block, specify a responsive height for the div, and set the iframe to height="100%". That would look like this:
<div style="height:50vw;width:100%"><iframe src="example.com" width="100%" height="100%"></iframe></div>
Just change height:50vw to whatever works best for your site.
Optionally, you can specify a title attribute. Putting that all together, your iframe code will look something like this:
<div style="height:50vw;width:100%"><iframe src="example.com" title="Example iframe" width="100%" height="100%"></iframe></div>
Once you’ve generated your iframe code, most of your work is done. To insert the code into your WordPress website, do one of the following:
div container, if applicable).div container, if applicable).