freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in HTML Basics for Beginners Lesson 5.4 of 34

Module 1: Introduction to HTML

  1. 1.1What is HTML?
  2. 1.2How websites work: HTML, CSS, and JavaScript
  3. 1.3HTML elements, tags, and attributes
  4. 1.4Setting up your first HTML file

Module 2: HTML Document Structure

  1. 2.1The basic HTML document
  2. 2.2DOCTYPE, html, head, and body explained
  3. 2.3The page title and metadata
  4. 2.4Writing your first webpage

Module 3: Text and Content Elements

  1. 3.1HTML headings: h1 to h6
  2. 3.2Paragraphs and line breaks
  3. 3.3Bold, emphasis, and text formatting
  4. 3.4Ordered and unordered lists

Module 4: Links and Navigation

  1. 4.1Creating links with the a tag
  2. 4.2Relative URLs and absolute URLs
  3. 4.3Linking to sections within a page
  4. 4.4Building basic website navigation

Module 5: Images and Embedded Content

  1. 5.1Adding images with the img tag
  2. 5.2Image paths and file locations
  3. 5.3Alternative text and image accessibility
  4. 5.4Embedding videos and external content

Module 6: Tables and Data

  1. 6.1Creating HTML tables
  2. 6.2Table rows, headers, and cells
  3. 6.3Organizing tabular data accessibly

Module 7: Forms and User Input

  1. 7.1Understanding HTML forms
  2. 7.2Text fields, email fields, and text areas
  3. 7.3Labels, buttons, and required fields
  4. 7.4Basic form structure and submission

Module 8: Semantic HTML and Accessibility

  1. 8.1What is semantic HTML?
  2. 8.2header, nav, main, section, and footer
  3. 8.3Using HTML to improve accessibility

Module 9: HTML for SEO

  1. 9.1HTML title tags and meta descriptions
  2. 9.2Heading hierarchy and content structure
  3. 9.3Canonical links, robots directives, and basic metadata

Module 10: Practice Project and Validation

  1. 10.1Build a simple HTML website

Embedding videos and external content

Covered here

  • The <video> element and its attributes
  • The <audio> element
  • Embedding YouTube and Google Maps with <iframe>
  • Performance and accessibility tips for embeds

Short answer

Use <video> and <audio> for media files you host yourself. Use <iframe> to embed content from other sites, like a YouTube video or a Google Map. Give every iframe a title, add loading="lazy", and never autoplay sound.

The video element

<video controls width="640" height="360" poster="images/resort-tour.jpg" preload="metadata">
  <source src="videos/resort-tour.webm" type="video/webm">
  <source src="videos/resort-tour.mp4" type="video/mp4">
  <track kind="captions" src="videos/resort-tour-en.vtt" srclang="en" label="English">
  Your browser does not support video. <a href="videos/resort-tour.mp4">Download the tour</a>.
</video>
  • controls shows play, pause, and volume.
  • poster shows a still image before playing.
  • <source> offers formats. The browser picks the first it supports.
  • <track> adds captions, which help deaf viewers and people watching on mute.

The audio element

<audio controls src="audio/radio-ad.mp3"></audio>

Good for podcasts and radio ads. Add a text transcript nearby for accessibility.

Embedding YouTube

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Tour of our resort in Tabaco, Albay"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

On YouTube, click Share, then Embed to copy this code. Hosting videos on YouTube saves your bandwidth. Change the title to describe the video, since screen readers announce it.

Embedding Google Maps

<iframe src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450"
  title="Map to Mayon Bakeshop, Legazpi City"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

In Google Maps, search your business, click Share, then Embed a map. A map on your contact page helps customers find you. Always write the address in text too, so it can be copied and read by screen readers.

Try it: embed a video

This embed has no title and loads right away. Add a descriptive title and loading=“lazy”. The preview blocks outside content, so check your code.

Live preview

Quick quiz

1. Which attribute shows video play buttons?
2. What embeds a YouTube video?
3. Why add title to an iframe?
4. What do captions help?

Common mistakes

  • Autoplaying with sound. It startles visitors. Browsers often block it anyway.
  • Too many embeds on one page. Each iframe adds weight. Lazy load them.
  • Map with no text address. Always write the address in plain text.
  • No captions. Many people watch on mute in public.

Your action

Tick each item when you can do it. Your progress saves on this device.

Key terms

<video>
Embeds a video file with built-in controls.
<audio>
Embeds an audio file.
<iframe>
Embeds another webpage inside your page.
<source>
Offers a media file in a specific format.
<track>
Adds captions or subtitles in WebVTT format.
Poster
An image shown before a video plays.

Questions beginners ask

Can I embed a Facebook video?

Yes. Facebook offers an embed code under the video's menu.

Why does autoplay not work?

Browsers only autoplay muted video. Add muted if autoplay is truly needed.

Is iframe bad for SEO?

No, but content inside an iframe belongs to the other site. Add your own text around it.

Related lessons

Need a website built or fixed while you practice? The team at Remar Digital can help.