Lesson 56 +10 XP

HTML Plug-ins and YouTube

Embed external things (like PDFs, games, or YouTube videos) into your page!

What's a plug-in?

A plug-in is a helper program that lets the browser show content it can't handle alone. Common plug-ins included PDF viewers, Flash players, and Java applets.

<object>: embed things

The <object> element embeds different kinds of content:

<object data="brochure.pdf" type="application/pdf" width="600" height="400">
  Can't show the PDF? <a href="brochure.pdf">Download it instead</a>.
</object>

data: the file to show.
type: the kind of file.
The text inside is the fallback if it can't load.

<embed>: quick embed

<embed> is simpler than <object>:

<embed src="game.swf" width="400" height="300">

Note: <embed> has no closing tag and no fallback text.

Flash is gone!

Adobe Flash was once everywhere, but it's retired. Don't build with Flash today. Use modern HTML5 (video, audio, canvas, and JavaScript) instead!

Embedding a YouTube video

The easiest modern way to add a video from YouTube:

Go to a YouTube video.
Click Share, then Embed.
Copy the <iframe> code they give you.

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

The src uses youtube.com/embed/ followed by the video's ID.
allowfullscreen lets it go full screen.
Always add a title for accessibility.

TL;DR

<object data type> embeds files like PDFs.
<embed src> is a quick (no-fallback) embed.
Flash is retired: don't use it!
Embed YouTube with an <iframe> from Share → Embed.
Always give iframes a title.

HTML Plug-ins and YouTube