Build a Youtube Video Info App in Node.js and Express Using Youtube Data API V3 and Yt Scraper in JS

Build a Youtube Video Info App in Node.js and Express Using Youtube Data API V3 and Yt Scraper in JS

Welcome folks today in this post we will be building youtube video info app in node and express using yt-scraper module in node.js. All the source code of the tutorial is shown below simply copy paste it. And a step by step is also shown below. Watch it to follow along with the video.

 

Screenshots

 

 

const express = require('express')

const bodyParser = require('body-parser')

const youtubeid = require('get-youtube-id')

const youtubeinfo = require('yt-scraper')

const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))

app.set("view engine","ejs")

app.get("/",(req,res) => {
     res.render("index")
})

app.post('/',(req,res) => {
     var url = req.body.url
     console.log(url)

     var id = youtubeid(url)

     console.log(id)

     var data = youtubeinfo.videoInfo(url,
           options = { detailedChannelData: true })

           console.log(data)

           data.then(function(data){
                console.log(data)
                res.render("data",{data:data})
           })


})

app.listen(5000,() => {
     console.log("App is listening on Port 5000")
})

 

<!DOCTYPE html>
<html>
  <head>
    <title>Youtube Video Info in Node.js and Express</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
          <br>
          <h1 class="text-center">Youtube Video Info App</h1>
          <br>
          <form action="/" method="POST">
            <div class="form-group">
                <input type="text" name="url" placeholder="Youtube URL" required class="form-control">
            </div>
            <div class="form-group">
                <button class="btn btn-danger btn-block">
                    Search Info
                </button>
            </div>
        </form>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

 

<!DOCTYPE html>
<html>
  <head>
    <title>Youtube Video Info in Node.js and Express</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <img width="200" height="200" src="<%=data.thumbnails[0].url%>">
      <a target="_blank" href="<%=data.url%>"><span><%=data.title%></span></a>
      <p><%=data.description%></p>
      <a target="_blank" href="https://www.youtube.com/channel/<%=data.channel.id%>">
       Channel
    </a>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</html>

 

See also  How to Get Value From Selected Radio Button in jQuery Full Tutorial For Beginners

DOWNLOAD SOURCE CODE

Leave a Reply