YouTube and Embedded Documents
What Is It?
A YouTube embed shows a video player inside your page. An object can display a document such as a PDF.
What the Tags Mean
iframe: holds the YouTube player.title: describes the player.allowfullscreen: allows fullscreen playback.object: embeds a file.a: provides a normal link.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube and Embedded Documents</title>
</head>
<body>
<iframe
title="Video from the course creator"
src="https://www.youtube-nocookie.com/embed/jDyt1UAE7vY"
width="320" height="180"
allowfullscreen>
</iframe>
<p><a href="https://www.youtube.com/watch?v=jDyt1UAE7vY">Watch on YouTube</a></p>
</body>
</html>Browser preview
What you see: The video player loads if you have internet access and the video allows embedding.
Example 2: Another Use
An object can also show an HTML document. This example includes its document directly, so no separate file is needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube and Embedded Documents</title>
</head>
<body>
<object type="text/html" data="data:text/html,%3Ch1%3EMy%20notes%3C%2Fh1%3E%3Cp%3EPractise%20HTML%20every%20day.%3C%2Fp%3E" width="300" height="200">
<p>My notes: Practise HTML every day.</p>
</object>
</body>
</html>Browser preview
Simple Tip
Use your video’s /embed/ address for the player. A normal watch address is for a link. Old Flash plug-ins are not needed.
Try It Yourself
Open your video with both the embedded player and the direct link.