Topic 3: iframe (embed, Albums-embed, video-embed, maps, Input tag introduction)

📖 12 min read · 🎯 beginner · 🧭 Prerequisites: echo-if-condition-task-on-if-echo, element-design-based-on-the-picture-requirement

Why this matters

Up until now, everything on your page has been content you wrote — your words, your images, your structure. But what if you want to show a YouTube video, drop in a Google Map, or display a photo album without making the visitor leave your site? That's exactly what <iframe> does — it cuts a window into your page and pulls in live content from somewhere else on the web. We'll also take our first look at <input>, the element that lets visitors actually type and talk back to your page. This is where your pages start feeling alive.

What You'll Learn

• How <iframe> works and what its key attributes (src, id, width, height, frameborder, allowfullscreen) do
• How to embed a YouTube video, a Flickr photo album, and a Google Map using <iframe>
• The purpose and syntax of the <input> tag and its most important type values: text, radio, checkbox, email, password, and submit
• How name, id, placeholder, and value attributes shape each input's behavior

The Analogy

Think of <iframe> as a framed porthole built into the wall of a building. The building is your webpage — you designed it, you own it — but through that porthole you can see a live feed of another location entirely: a concert hall streaming music, a gallery displaying photographs, a city square shown on a map. The porthole has a fixed size and position (set by width and height), a label above the door so staff can find it quickly (id), and a lock that controls whether visitors can go fullscreen (allowfullscreen). You choose what the porthole points at by giving it an address (src). The external location doesn't need to know your building exists — it just keeps broadcasting, and your porthole shows it in real time.

Chapter 1: Introduction to <iframe>

The <iframe> element — short for inline frame — embeds another HTML document or web resource directly inside your page. The browser renders the external content inside a sandboxed rectangle, keeping the two documents separate.

The essential attributes every <iframe> shares:

The skeleton of any iframe:

<iframe
  id="myFrame"
  src="https://example.com"
  width="600"
  height="400"
  frameborder="0"
  allowfullscreen>
</iframe>

Note on frameborder: This attribute is deprecated in HTML5. The modern equivalent is border: none in CSS on the iframe element, but you will still encounter frameborder="0" throughout documentation and real-world code, so it is important to recognize it.

Chapter 2: Video Embed

The most common <iframe> use case in the wild is embedding a YouTube video. YouTube provides a special /embed/ URL format that strips away all YouTube chrome and delivers only the player.

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

Breaking down each attribute in context:

• id="videoFrame" — gives this specific iframe a name so you can target it with CSS (#videoFrame { border-radius: 8px; }) or JavaScript (document.getElementById('videoFrame')).
• src="https://www.youtube.com/embed/VIDEO_ID" — replace VIDEO_ID with the 11-character ID from any YouTube URL. For example, if the YouTube link is https://www.youtube.com/watch?v=dQw4w9WgXcQ, the embed src becomes https://www.youtube.com/embed/dQw4w9WgXcQ.
• width="560" / height="315" — the standard 16:9 aspect ratio at a common desktop size.
• allowfullscreen — without this attribute the fullscreen button inside the player is disabled.

Chapter 3: Albums Embed

Photo hosting services like Flickr expose embed-friendly player URLs for their albums. The pattern is the same — drop a src pointing at the player endpoint, set your dimensions, and the gallery renders inside your page.

<iframe
  id="albumFrame"
  src="https://www.flickr.com/photos/ALBUM_ID/player/"
  width="800"
  height="600"
  frameborder="0">
</iframe>

Key points:

• id="albumFrame" — assigning a distinct id to each iframe on the page is especially important when you have multiple frames. It prevents collisions when writing CSS selectors or JavaScript queries.
• Replace ALBUM_ID with the numeric album identifier from the Flickr URL of the album you want to display.
• allowfullscreen is omitted here because photo slideshows often do not expose a fullscreen API through the embed endpoint — only include it when the embedded service supports it.

Chapter 4: Maps Embed

Google Maps generates an embed code directly from its interface (Share → Embed a map → Copy HTML). The resulting <iframe> points at https://www.google.com/maps/embed with a pb= query parameter that encodes the location and zoom level.

<iframe
  id="mapFrame"
  src="https://www.google.com/maps/embed?pb=LOCATION_CODE"
  width="600"
  height="450"
  frameborder="0"
  allowfullscreen>
</iframe>

• id="mapFrame" — on responsive sites, JavaScript often reads id="mapFrame" to resize the map when the viewport changes (e.g., switching from desktop to mobile).
• LOCATION_CODE — the long encoded string that Google Maps generates. It is not human-readable; always copy it directly from the Google Maps Embed a map dialog rather than typing it by hand.
• allowfullscreen — lets users expand the map to fill the screen, which is useful for directions.

graph LR
    A[Your Webpage] -->|src URL| B[iframe Element]
    B --> C{Type of Embed}
    C -->|YouTube /embed/ URL| D[Video Player]
    C -->|Flickr /player/ URL| E[Photo Album]
    C -->|Google Maps /embed URL| F[Interactive Map]

Chapter 5: Comprehensive Guide to the <input> Tag

The <input> tag is a self-closing element that renders an interactive control. Its behavior changes completely based on the type attribute — one tag, many personalities.

Common attributes that appear across all input types:

Text Input

The default and most general input type. Accepts any string of characters.

<input
  type="text"
  name="username"
  id="username"
  placeholder="Enter your username"
  value="">

• type="text" — tells the browser to render a single-line text box.
• name="username" — when the form is submitted, the server receives a key-value pair like username=johndoe.
• id="username" — a <label for="username"> will click-focus this field; CSS rule #username styles it.
• placeholder="Enter your username" — disappears the moment the user starts typing.
• value="" — blank here, meaning the field starts empty and is filled by the user.

Radio Buttons

Radio buttons let a user pick exactly one option from a group. Grouping is controlled by sharing the same name attribute.

<input type="radio" name="gender" id="male" value="male"> Male
<input type="radio" name="gender" id="female" value="female"> Female

• Both inputs share name="gender" — this is what makes them mutually exclusive. The browser enforces "only one selected at a time" per name group.
• value="male" / value="female" — the data sent to the server reflects whichever radio button is selected when the form is submitted.

Checkbox

Checkboxes allow zero or more selections from a group. They share a name to signal they are answers to the same question.

<input type="checkbox" name="interest" id="coding" value="coding"> Coding
<input type="checkbox" name="interest" id="music" value="music"> Music

• name="interest" — the same name on multiple checkboxes tells the server these are multiple answers to one question. The submitted data may contain interest=coding&interest=music if both are checked.
• Unlike radio buttons, checking one checkbox does not uncheck the others.

Email

Validates that the entered text matches an email address format (contains @ and a domain). On mobile, it triggers an email-optimized keyboard.

<input
  type="email"
  name="email"
  id="email"
  placeholder="Enter your email"
  value="">

Password

Masks the characters the user types, replacing them with bullets or asterisks. The value is still transmitted as plain text unless your page uses HTTPS.

<input
  type="password"
  name="password"
  id="password"
  placeholder="Create a password"
  value="">

Submit Button

Triggers form submission when clicked. The value attribute sets the visible label on the button.

<input
  type="submit"
  name="submit"
  id="submitBtn"
  value="Register">

• type="submit" — tells the browser: clicking this sends the form data to the URL specified in the form's action attribute.
• value="Register" — the text the user reads on the button face.

Chapter 6: Putting It Together

Here is a complete registration form that combines all six input types alongside an embedded map, video, and album — exactly the structure you would use for a community event page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Community Event Registration</title>
</head>
<body>

  <h1>Annual Vizag Dev Meetup</h1>

  <!-- Promotional video -->
  <h2>Event Recap Video</h2>
  <iframe
    id="videoFrame"
    src="https://www.youtube.com/embed/VIDEO_ID"
    width="560"
    height="315"
    frameborder="0"
    allowfullscreen>
  </iframe>

  <!-- Photo album from previous events -->
  <h2>Last Year's Highlights</h2>
  <iframe
    id="albumFrame"
    src="https://www.flickr.com/photos/ALBUM_ID/player/"
    width="800"
    height="600"
    frameborder="0">
  </iframe>

  <!-- Venue map -->
  <h2>Find Us Here</h2>
  <iframe
    id="mapFrame"
    src="https://www.google.com/maps/embed?pb=LOCATION_CODE"
    width="600"
    height="450"
    frameborder="0"
    allowfullscreen>
  </iframe>

  <!-- Registration form -->
  <h2>Register Now</h2>
  <form action="/register" method="post">

    <label for="username">Full Name:</label>
    <input type="text" name="username" id="username" placeholder="Enter your username" value=""><br><br>

    <label>Gender:</label>
    <input type="radio" name="gender" id="male" value="male"> Male
    <input type="radio" name="gender" id="female" value="female"> Female<br><br>

    <label>Interests:</label>
    <input type="checkbox" name="interest" id="coding" value="coding"> Coding
    <input type="checkbox" name="interest" id="music" value="music"> Music<br><br>

    <label for="email">Email:</label>
    <input type="email" name="email" id="email" placeholder="Enter your email" value=""><br><br>

    <label for="password">Password:</label>
    <input type="password" name="password" id="password" placeholder="Create a password" value=""><br><br>

    <input type="submit" name="submit" id="submitBtn" value="Register">

  </form>

</body>
</html>

🧪 Try It Yourself

Task: Build a Community Event Registration Page

1. Create a new file called event.html.
2. Add three <iframe> elements:
   • A YouTube video embed (use any public video — grab its ID from the URL).
   • A Google Map embed for your city (use the Share → Embed a map button on maps.google.com to get the src URL).
   • A Flickr album embed (or substitute any public embed URL from another photo service).
3. Below the iframes, add a <form> containing at minimum:
   • A type="text" input for the attendee's name
   • Two type="radio" inputs sharing the same name for a session preference (e.g., "Morning" / "Afternoon")
   • Two type="checkbox" inputs for topic interests
   • A type="email" input
   • A type="submit" input with the label "Register Now"

Success criterion: Open event.html in your browser. You should see all three embedded frames rendering their content (video player, map, album), and the form below them should show all input controls. Clicking the submit button should attempt to submit the form (it will likely error without a server — that's expected at this stage).

🔍 Checkpoint Quiz

Q1. What does the allowfullscreen attribute do on an <iframe>, and on which embed types from this lesson is it most important to include?

Q2. Given this snippet, what value will be sent to the server if the user selects "Female" and submits the form?

<input type="radio" name="gender" id="male" value="male"> Male
<input type="radio" name="gender" id="female" value="female"> Female

A) id=female B) gender=female C) name=female D) value=female

Q3. A developer writes the following two checkboxes. What is wrong with this code?

<input type="checkbox" name="hobby1" id="coding" value="coding"> Coding
<input type="checkbox" name="hobby2" id="music" value="music"> Music

A) The id values must be the same for checkboxes in a group B) The name values should be the same so the server knows they are answers to the same question C) Checkboxes cannot have value attributes D) Nothing is wrong; this is correct

Q4. You want to embed a Google Map on a page and also write a JavaScript function that resizes the map iframe when the user's screen is narrower than 600px. Which attribute do you need on the <iframe> to make the JavaScript targeting work, and what value should you give it?

A1. allowfullscreen permits the embedded content to expand to fill the entire screen when the user clicks the fullscreen button inside the player. It is most important on video embeds (YouTube) and map embeds (Google Maps), where fullscreen viewing adds real value. Photo album players may not support fullscreen through their embed endpoint.

A2. B) gender=female — the name attribute becomes the key and the value attribute of the selected radio button becomes the value in the submitted form data.

A3. B) — The name values should be identical (name="hobby" on both) so the server receives them as multiple answers to one question. Using different name values (hobby1, hobby2) treats them as two separate, unrelated questions and breaks any server-side grouping logic.

A4. The id attribute. Give it a unique value such as id="mapFrame". JavaScript can then reference it with document.getElementById('mapFrame') to read or set its width and height properties dynamically.

🪞 Recap

• <iframe> embeds a live external page inside a rectangular window on your page, controlled by src, width, height, frameborder, and allowfullscreen.
• The id attribute on an <iframe> is essential for targeting it with CSS or JavaScript, especially when multiple iframes appear on the same page.
• The <input> tag's behavior is determined by its type attribute: text, radio, checkbox, email, password, and submit each render a different control and accept different data.
• Radio buttons in the same group share a name attribute to enforce single selection; checkboxes in the same group also share a name so the server can receive multiple selected values.
• The placeholder attribute shows hint text inside an empty input field; value holds the actual data that gets submitted with the form.

📚 Further Reading

• MDN: <iframe> element — the source of truth on every attribute, security considerations, and browser support
• MDN: <input> element — exhaustive reference for all type values and their attributes
• Google Maps Embed API — official guide for generating and customizing Google Maps embed URLs
• ⬅️ Previous: Element Design (Based on the picture/requirement)
• ➡️ Next: JavaScript Objects