Embedding Content

🪟 Windows to the World: Embedding Content in HTML

Imagine your webpage is a magical picture frame. What if you could put ANYTHING inside it—videos, maps, drawings, even entire websites? Let’s discover how!

🎯 What You’ll Learn

Think of embedding content like putting windows in a house. Your webpage is the house, and these special HTML elements are windows that show amazing things from the outside world!

🖼️ The iframe Element: Your Magic Window

What is an iframe?

An iframe (inline frame) is like a TV screen on your webpage. Just like your TV shows channels from around the world, an iframe shows content from other places on the internet!

<iframe src="https://example.com">
</iframe>

Simple breakdown:

• <iframe> = “Put a window here!”
• src = “Show this website inside”

Real-Life Example

Imagine you’re making a webpage about your favorite park. You want to show where it is on a map. Instead of drawing the map yourself, you put a window (iframe) that shows Google Maps!

<iframe
  src="https://example.com"
  title="My favorite website">
</iframe>

💡 Remember: Always add a title attribute! It helps people using screen readers understand what the iframe shows.

⚙️ Iframe Configuration: Making Your Window Perfect

Your iframe window needs some settings, just like adjusting a TV!

Size Controls

<iframe
  src="https://example.com"
  width="300"
  height="200">
</iframe>

Security Settings

<iframe
  src="https://example.com"
  sandbox
  loading="lazy">
</iframe>

Important attributes:

🎬 Embedding YouTube Videos

This is the MOST FUN part! Let’s put YouTube videos on your page!

Step-by-Step

1. Go to YouTube and find your video
2. Click “Share” → then “Embed”
3. Copy the code YouTube gives you

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="My Cool Video"
  frameborder="0"
  allow="accelerometer; autoplay;
         clipboard-write; encrypted-media;
         gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Breaking It Down

graph TD
    A["YouTube Video URL"] --> B["Add /embed/"]
    B --> C["Put in iframe src"]
    C --> D["Video plays on YOUR page!"]

Key parts:

• VIDEO_ID = The unique code for each video
• allowfullscreen = Let users go fullscreen
• allow = Permissions the video needs

Mobile-Friendly Tip

<div style="position: relative;
            padding-bottom: 56.25%;
            height: 0;">
  <iframe
    style="position: absolute;
           top: 0; left: 0;
           width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/xyz"
    title="Video">
  </iframe>
</div>

This makes videos resize perfectly on any screen!

🗺️ Embedding Google Maps

Want to show people exactly where something is? Put a map on your page!

Getting Your Map Code

1. Go to Google Maps
2. Find your location
3. Click Share → Embed a map
4. Copy the HTML code

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="400"
  height="300"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  title="Location Map">
</iframe>

Map Attributes Explained

🎨 Inline SVG Basics: Drawing with Code!

What is SVG?

SVG (Scalable Vector Graphics) is like drawing with magic instructions. Instead of pixels (tiny dots), SVG uses shapes and lines!

graph TD
    A["Regular Image"] --> B["Made of pixels"]
    B --> C["Gets blurry when big"]
    D["SVG Image"] --> E["Made of math"]
    E --> F["Always stays sharp!"]

Your First SVG

<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    fill="blue">
  </circle>
</svg>

What this means:

• width/height = Size of drawing area
• cx, cy = Center of circle (x, y)
• r = Radius (how big)
• fill = Color inside

Common SVG Shapes

<!-- Rectangle -->
<rect x="10" y="10"
      width="80" height="50"
      fill="red"/>

<!-- Line -->
<line x1="0" y1="0"
      x2="100" y2="100"
      stroke="black"/>

<!-- Ellipse (stretched circle) -->
<ellipse cx="50" cy="50"
         rx="40" ry="20"
         fill="green"/>

Why SVG is AMAZING

✅ Never gets blurry (zoom in forever!) ✅ Tiny file size (just text!) ✅ Change colors with CSS ✅ Animate with code

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40"
          fill="orange"
          stroke="black"
          stroke-width="3">
  </circle>
</svg>

🎮 The Canvas Element Basics: Your Digital Canvas

What is Canvas?

Think of <canvas> as a blank piece of paper where JavaScript can draw ANYTHING—games, charts, art!

graph TD
    A["Canvas Element"] --> B["Empty rectangle"]
    B --> C["JavaScript draws on it"]
    C --> D["Games, charts, art!"]

Creating a Canvas

<canvas id="myCanvas"
        width="300"
        height="200">
  Your browser doesn't support canvas
</canvas>

Important parts:

• id = Name so JavaScript can find it
• width/height = Size in pixels
• Fallback text for old browsers

Drawing with JavaScript

<canvas id="art"
        width="200"
        height="200">
</canvas>

<script>
  const canvas =
    document.getElementById('art');
  const ctx =
    canvas.getContext('2d');

  // Draw a rectangle
  ctx.fillStyle = 'purple';
  ctx.fillRect(10, 10, 100, 80);

  // Draw a circle
  ctx.beginPath();
  ctx.arc(150, 100, 40, 0,
          Math.PI * 2);
  ctx.fillStyle = 'gold';
  ctx.fill();
</script>

Canvas vs SVG: When to Use What?

🔐 Accessibility: Everyone Should See Your Windows!

When embedding content, help everyone access it:

For iframes:

<iframe
  src="video.html"
  title="How to bake cookies video"
  aria-label="Video player">
</iframe>

For SVG:

<svg role="img" aria-label="Blue circle">
  <title>Blue Circle</title>
  <desc>A simple blue circle
        on white background</desc>
  <circle cx="50" cy="50" r="40"
          fill="blue"/>
</svg>

For Canvas:

<canvas id="chart"
        role="img"
        aria-label="Sales chart
                    showing growth">
</canvas>

🎁 Quick Summary

Golden Rules

1. ✅ Always use title on iframes
2. ✅ Add loading="lazy" to save speed
3. ✅ Make videos responsive
4. ✅ Use SVG for icons and logos
5. ✅ Use Canvas for games/animations
6. ✅ Add accessibility attributes!

🚀 You Did It!

Now you can put windows to the whole world on your webpages! Whether it’s a YouTube video of cute cats, a map to your favorite pizza place, or a custom drawing—you’ve got the power to embed it all!

“Your webpage is no longer just a page—it’s a portal to everywhere!” 🌍