Embed YouTube Videos in HTML

Introduction

The HTML <embed> tag can be used to include various types of content such as images, videos, and other web pages into our web page. In this lab, we will use the HTML <embed> tag to add a YouTube video to a web page.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/MultimediaandGraphicsGroup -.-> html/embed_media("`Embedding External Media`") subgraph Lab Skills html/basic_elems -.-> lab-70752{{"`HTML External Content/Plugin`"}} html/charset -.-> lab-70752{{"`HTML External Content/Plugin`"}} html/lang_decl -.-> lab-70752{{"`HTML External Content/Plugin`"}} html/head_elems -.-> lab-70752{{"`HTML External Content/Plugin`"}} html/para_br -.-> lab-70752{{"`HTML External Content/Plugin`"}} html/embed_media -.-> lab-70752{{"`HTML External Content/Plugin`"}} end

HTML Document Structure

Create a new file named index.html.

Once you've created your index.html file, add the basic structure for an HTML document with a head and body element.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Embed Tag Lab</title>
  </head>
  <body></body>
</html>

Add a video using the HTML `<embed>` tag

To add a video to your web page, you will need to use the YouTube embed code.

Navigate to any video on YouTube.
Under the video, click the "Share" button and then click the "Embed" button. This will open the Embed Video window.
Copy the HTML code that appears in the Embed Video window.
Paste the code into your index.html file, within the <body> element.
```
<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />
```

Set the width and height of the video

To avoid sizing issues, it is important to set the width and height of the video.

Add the height and width attributes to your <embed> tag. The width attribute defines the width of the video, and the height attribute sets its height.
```
<embed
  src="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
/>
```

Save the index.html file and open it in your web browser to verify that the video has been added successfully.

Add a fallback for unsupported browsers

Not all browsers support the <embed> tag. To make sure your web page is still functional for users with unsupported browsers, you can add a fallback option.

Add the <object> tag with parameters specifying the type of embedded content and the URL of the resource to be embedded.

<object
  type="text/html"
  data="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
>
  <p>
    Your browser does not support the HTML5 Video element. Please upgrade to
    a modern browser.
  </p>
</object>

Save the index.html file and open it in a browser that does not support the <embed> tag, such as Internet Explorer. Verify that the fallback option works.

Summary

Congratulations! You have successfully learned how to add a video to a web page using the HTML <embed> tag. Don't forget to check for browser support and use the fallback option if necessary.

HTML External Content/Plugin