HTML5 Embed Videos

How to Embed Videos in HTML5?

How to embed videos in HTML5? is the most commonly-asked question in Google, StackOverflow, and Quora. This method is for those browsers that do not support media elements, particularly <video> tag.

All you need to do is upload the video on YouTube that you intend to display on your page and extract the HTML code of that video.

Here is a live example that will teach you how to embed videos in HTML5?

Step 1: Upload Videos(s)

The very fast step for embedding videos in HTML5 is visiting the Youtube upload video page and following their instructions to upload your video there.

Step 2: Create an HTML5 Code to Embed Videos.

When you open your uploaded video on YouTube, you’ll find the share button at the bottom of your video. Just click on that share button.

When you click on the Share button, a display panel will open with a few more buttons. Click on the embed button here that will generate an HTML5 code for your video. Using this code, you can embed that video on your webpage.

Just copy and paste that code into your HTML5 document. By default, video is enclosed inside a frame element.

To customize the video, such as changing its height, override the width and height attribute of the iframe tag and assign new values to them.

Example

<!DOCTYPE html>
<html>
<head>
    <title> How to Embed Videos is HTML5? </title>
</head>
<body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/2puqulfVVgo" title="YouTube video player"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
</body>
</html>

The output of this code will be

How to Embed Video in HTML5?

Browsers that support iframe to Emed HTML5 Videos

Google Chrome
Microsoft Edge
Opera

Key Takeaways on how to embed videos in HTML5

The above-discussed method on how to embed videos in HTML5? is no longer used too often. It was used before the advent of the HTML5 <video> tag.

External resources:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Next Lesson » « Previous Lesson