How do I get the title of a youtube video if I have the Video Id?

user_186964 0
Viewed 73098

I'm playing now with the Youtube API and I began a small project (for fun).

The problem Is that I cant find the way to get Title of a video from the Id. (example: ylLzyHk54Z0)

I have looked in the DATA and PLAYER api documentation and I cannot find it.

If someone knows how to do this or if someone could help me find the way to do this, please help me.

NOTE: I'm using javascript. It will be a web app.

EDIT: I have got an Idea. Maybe using a Regular expresion to parse out the title from the page title. I'm working on this.

title youtube api javascript
11 Answers

Using PHP

<?php
echo explode(' - YouTube',explode('</title>',explode('<title>',file_get_contents("https://www.youtube.com/watch?v=$youtube_id"))[1])[0])[0];
?>
user_90662180

I wrote a function to get the title & author of a Youtube video given an id. The function loads a Youtube video in an iframe, then adds a message listener for when Youtube emits its initial message. This initial message contains the video data. It then removes the iframe and message listener from the page.

import { Observable } from 'rxjs';

function getVideoData$(ytId){
    return new Observable((observer) => {
        let embed = document.createElement('iframe');
        embed.setAttribute('src', `https://www.youtube.com/embed/${ytId}?enablejsapi=1&widgetid=99`);
        embed.cssText = "position: absolute; display: hidden";
        embed.onload = function() {
            var message = JSON.stringify({ event: 'listening', id: 99, channel: 'widget' });
            embed.contentWindow.postMessage(message, 'https://www.youtube.com');
        }
        function parseData(e) {
            const {event, id, info} = JSON.parse(e.data)
            // console.log(JSON.parse(e.data))
            if (event == 'initialDelivery' && id == 99) observer.next(info.videoData)
        }
        document.body.appendChild(embed); // load iframe
        window.addEventListener("message", parseData) // add Api listener for initialDelivery
        return function cleanup(){
            window.removeEventListener("message", parseData)
            document.body.removeChild(embed)
        }
    });
}

I chose to return an observable because the video has to be retrieved async from yt's servers and is then sent back to the iframe and then to a message handler we setup. A promise could be used here instead, but I found that the promise would resolve multiple times, before the message listener gets removed. So I used rxjs to only get the first value. Here is how I use this function.

import { firstValueFrom } from 'rxjs';

getVideoDataFromUrl('https://www.youtube.com/watch?v=3vBwRfQbXkg')

async function getVideoDataFromUrl (url){
    const videoId = parseYoutubeUrl(url)
    if (!videoId) return false
    let videoData = await firstValueFrom(getVideoData$(videoId)) // await video data
    console.log({videoData})
}

function parseYoutubeUrl(url) {
    var p = /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
    let urlMatch = url.match(p)
    if(urlMatch) return urlMatch[1];
    return false;
}
user_87237480
Related