iframe

An iFrame (short for Inline Frame) is a frame used to embed some external elements into HTML code on your site. The most popular elements for which embed code can be used are the following: images, video, social icons, Google map, PDF files, etc. With the help of iFrame code you can embed one HTML file to the other. An example of external embed code looks as follows:

<iframe width="560" height="315" src="https://www.youtube.com/embed/b-9rHbghJBo" frameborder="0" allowfullscreen></iframe>

In above code you can see embed code for YouTube video. From the code above you can see video ID with direct link for the video.

Embedded video will look like this:

IFrames are most often used to insert dynamic content – like ads or widgets – from other sources. For instance, YouTube videos embedded on blogs are inserted through copied and pasted IFrames.

Embed code allows you to specify video height and width, frameborder, etc. Here are an examples of <iframe> attributes:

1. height is used to indicate the height of the frame. It can be set in pixels or as a percentage.

2. width indicates the width of the frame. Pixels and percentage are used to set it.

3. allowfullscreen attribute allows you to open embed element in fullscreen mode. This attribute is usually used for the video.

4. frameborder is the same as the border CSS property. Used to add border for the frame.

5. marginheight and marginwidth is the same as the CSS margin property. Attributes are used to add space between the frame’s content and its left (right) and top (bottom) margins.

6. name is a name for embedded element, it defines a unique name for the iframe.

7. scrolling is used to add scrollbar for the frame. Scrolling properties are:

   • auto allows to add scrolling bar automatically if required.

   • yes allows to add scroll bar.

   • no for the frame without scrolling bar.

8. align is used to set up element alignment.