iframe

In this module we wil learn about the <iframe> tag.

File Location

For this module, you should be working in the following location:

    javascript-library
        └── 0-PreWork
            └── 1-HTML-Basics

                14-iframe.html <---You should be here.

            └── 2-CSS-Basics
            └── 3-JavaScript-Basics
            └── 4-assets

Description

The inline frame (iframe) is used to embed another document inside of an HTML document. This is a fairly straight-forward way to describe the <iframe>, and that is because it is a fairly straight-forward element to use in practice. Embedding third-party media is a common use of <iframe> and we'll show you how to insert a YouTube video into your own HTML using this tag.

Sample Code

Add the following sample code to your file:

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
</head>
<body>

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

</body>
</html>

Discussion

It may seem strange that this isn't a void element, similar to the <img /> tag, but that is explained readily enough: compatibility with legacy versions of web browsers. If you've already tried to insert text between the opening/closing tags, you probably noticed that the text doesn't appear when the document is rendered. This is because the browser simply ignores that content. <iframe> can still be styled, as we have done above with the width and height attributes. However, you'll want to consider how your styling may be rendered on a variety of devices.

Challenge

Try changing the src attribute to a different target. How does that affect your layout? Practice changing the width and height using values such as percentages (i.e. width="20%").

Extra Reading

Resources: http://html.com/tags/iframe/

PreviousnavNext3-CSS Basics

Last updated