Node.JS Express YouTube Data API Project to Search YouTube Video Info in Browser Using Javascript

You are currently viewing Node.JS Express YouTube Data API Project to Search YouTube Video Info in Browser Using Javascript

Node.js Express Youtube Data API Project to Search Youtube Video Info in Browser Using Javascript

const express = require("express");
 
const getvideoid = require("get-video-id");
 
var fetchVideoInfo = require("updated-youtube-info");
 
const app = express();
 
const bodyparser = require("body-parser");
 
// set the view engine ejs
 
app.use(bodyparser.urlencoded({ extended: false }));
 
app.use(bodyparser.json());
 
app.set("view engine", "ejs");
 
const PORT = 5000;
 
app.get("/", (req, res) => {
  res.render("index",{videoInfo:''});
});
 
app.post("/getvideoinfo", (req, res) => {
  console.log(req.body.url);
 
  const { id } = getvideoid(req.body.url);
 
  console.log(id);
 
  fetchVideoInfo(id, function (err, videoInfo) {
    if (err) throw new Error(err);
      console.log(videoInfo);
      
      res.render('index',{videoInfo:videoInfo})
  });
});
 
app.listen(PORT, () => {
  console.log("App is listening on port 5000");
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube Video Info Extractor Tool</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">
            Youtube Video Info Extractor Tool
        </h1>
 
        <form action="/getvideoinfo" method="post">
            <div class="form-group">
                <label for="URL">Enter Youtube Video URL:</label>
                <input class="form-control" type="text" name="url" required placeholder="Enter Video URL" id="">
            </div>
            <div class="form-group">
                <button class="btn btn-danger btn-block">
                    Extract Video Info
                </button>
            </div>
        </form>
 
        <%if(videoInfo){%>
 
            <table class="table table-striped">
                <tbody>
                    <thead>
                        <tr>
                            <th>Title of Video</th>
                            <th>Description of Video</th>
                            <th>Video URL</th>
                            <th>No of Views</th>
                            <th>Thumbnail of Video</th>
                            <th>Duration of Video in Seconds</th>
                            <th>Channel Name</th>
                            <th>Genre</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><%=videoInfo.title%></td>
                            <td><%=videoInfo.description%></td>
                            <td><a href="<%=videoInfo.url%>"><%=videoInfo.url%></a></td>
                            <td><%=videoInfo.views%></td>
                            <td><img class="mx-auto d-block img-fluid" src="<%=videoInfo.thumbnailUrl%>" alt=""></td>
                            <td><%=videoInfo.duration%></td>
                            <td><%=videoInfo.owner%></td>
                            <td><%=videoInfo.genre%></td>
                        </tr>
                    </tbody>
                </tbody>
            </table>
 
        <%}%>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 
</html>

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply