Adding YouTube videos on an HTML web page

HTMLWeb DevelopmentFront End Technology

Videos can be easily from YouTuvbe to your web page. You need to just embed the videos.

At first, get the Video id −

Step1: Go to the Video and right click on it. Select “Stats for nerds” −

On clicking, you will get the following dialog box displaying the stats −

Above you can see the video id is F6m0ghjadlw. Now, we will embed the same video using its id −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
   <title>Learn WordPress</title>
</head>
<body>
   <h1>WordPress Installation</h1>
   <p>Following is the video demonstrating how to install WordPress on localhost using
   XAMPP Server:</p>
   <iframe height="350" width="600"
      src="https://www.youtube.com/embed/F6m0ghjadlw">
   </iframe>
</body>
</html>

Output

Following is the output displaying we have successfully embedded a YouTube video on a web page −

You can also achieve the same using the <embed> tag. Following is the HTML code −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
   <title>Learn WordPress</title>
</head>
<body>
   <h1>WordPress Installation</h1>
   <p>Following is the video demonstrating how to install WordPress on localhost using
   XAMPP Server (video uploaded using embed element):</p>
   <embed height="350" width="600" src="https://www.youtube.com/embed/F6m0ghjadlw">
</body>
</html>

Output

The output displays the video successfully embedded −

raja
Published on 21-Jun-2019 17:07:34
Advertisements