Unable to get video title

[jaskaran27]

The script is unable to get the video title for any video now. It shows https://youtube.com/devicesupport as the title for each video.

The same happens now in the official demo as well - http://works.daugilas.com/lazyYT/demo/fixed.html

[tylerpearson]

Uh oh, looks like this is related to Google shutting down the Youtube v2 API today. I'll have to take a look at what the v3 API setup requires to see if it can be swapped out.

[lidel]

New API requires registration and obtaining API key, which somehow makes it troublesome for less technical people

I was about to provide a PR that takes advantage of oEmbed endpoint which will not be deprecated any time soon and does not require API key:

$.getJSON('https://www.youtube.com/oembed?format=json&url=http://www.youtube.com/watch?v=' + id, function (data) 
  $('#lazyYT-title-' + id).text(data.title);
});

but Google does not provide CORS header for the main domain and request from javascript will fail. 👎

Unless we find a way to fetch title without API key, I feel we may need consider adding it as a configuration option and fetching title via official API:

GET https://www.googleapis.com/youtube/v3/videos?part=snippet&id={VIDEO_ID}&fields=items%2Fsnippet(title)&key={YOUR_API_KEY}

Reference: https://developers.google.com/apis-explorer/?hl=en_US#p/youtube/v3/youtube.videos.list

[ruudboon]

For now it would be nice if you could disable the title.

[rorifree]

I use this to just disable (hide) it, until a proper solution is found...

var elements = document.getElementsByClassName("html5-info-bar");
for(var i=0, l=elements.length; i<l; i++){
elements[i].style.display = 'none';
}

[brownsugar]

I just requested api key and edited original js to fix it...

[tim99-1977]

how to get such an api key?

[brownsugar]

YouTube Data API (v3): https://developers.google.com/youtube/v3/
Obtaining authorization credentials: https://developers.google.com/youtube/registering_an_application

[jet2k]

I have a key etc, what exactly did you replace in the original js brownsugar to pull the new data?

I replaced the URL etc

https://www.googleapis.com/youtube/v3/videos?id=' + id + '&key=

[brownsugar]

Here's my code:

$.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=YOUR_KEY', function (data) {
    $el.find('#lazyYT-title-' + id).text(data.items[0].snippet.title);
});

[jet2k]

ahh fantastic

my api url was a bit different, but most of all I had

 text(data.items[0].snippet.title.$t);  

thanks again, works now!

[Jmeyering]

@tylerpearson @ruudboon PR #39 Would add add the ability to hide the title.

[mgrn0]

thx @brownsugar for the excellent workoing example.

[Daugilas]

Thanks everyone, especially those who already provided solutions. I have updated the plugin to work with Youtube API v3. Its here: https://github.com/Daugilas/lazyYT with few new options.
Demo is updated as well.

Creating a PR in a moment.

[jaskaran27]

@Daugilas Thanks, this works perfectly.