CODEWITHSUNDEEP
iframeyoutubeyoutube-api
Randy Hall
Randy Hall

Reputation: 8137

Get YouTube video info from iFrame embed API

I'm using the YouTube iFrame API to embed videos and create a simple custom player.

I'm looking to get the video title/description/etc. from the API without having to do another call to YouTube to get the information. I am unable to find any relevant information - any thoughts, or am I stuck making an extra call to get the video info? I thought perhaps the information was available in the player object returned by YT.Player().

Thanks!

Upvotes: 4

Views: 9891

Answers (5)

J W
J W

Reputation: 2861

From what I can tell, Iframe API's getVideoData() always calls home to https://www.youtube.com/get_video_info.

Nit: I would suggest not going outside the onPlayer* functions to call getVideoData() by getting it off of the event object rather than the player object.

In either case the function returns and object like so:

Object { video_id: "XXX", author: "AUTHOR", title: "TITLE" }

Here's an example that sets a Google Analytics Event with the video Id:

var onPlayerStateChange = function(event) {

    // get video Id from event, not player.
    videoId = typeof event.target.getVideoData().video_id !== 'undefined' ? event.target.getVideoData().video_id : 'unknown';

    // track when user clicks Play
    if (event.data == YT.PlayerState.PLAYING) {

        if (window.ga && ga.loaded) {

            ga('send', 'event', 'Video', 'play', videoId);
        }
    }

    // track when user clicks Pause
    if (event.data == YT.PlayerState.PAUSED) {

        if (window.ga && ga.loaded) {

            ga('send', 'event', 'Video', 'pause', videoId);
        }
    }

    // track when video ends
    if (event.data == YT.PlayerState.ENDED) {

        if (window.ga && ga.loaded) {

            ga('send', 'event', 'Video', 'ended', videoId);
        }
    }
};

Upvotes: 0

Richard Blakely
Richard Blakely

Reputation: 1

Yeah, JacobFennell's answer is correct and is the best way to get the data from the player object. Just be sure you handle this in the onPlayerReady event, otherwise you'll get an undefined object:

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });

    console.log(player);
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    player.getVideoData(); //here you go
    event.target.playVideo();
  }

Upvotes: 0

JacobFennell
JacobFennell

Reputation: 468

As it is currently, assuming your player object is ready, video data is available via player.getVideoData() which returns the video data object from the YT.Player:

var videoData = player.getVideoData();
var title = videoData['title'];
var video_id = videoData['video_id'];
var author = videoData['author'];

Note, the title in the video data object is only a short title, 48 characters from what I can see. A long title and any description are not currently available.

Upvotes: 6

Randy Hall
Randy Hall

Reputation: 8137

It seems that this is not possible. I spent some extensive time manually looking through the player object and could not find anything remotely related to title or description.

Upvotes: 0

Rushikesh jogle
Rushikesh jogle

Reputation: 591

Here i have done with it .. If it's correct then mark as Right :)

<script type="text/javascript">
var playListURL = 'http://gdata.youtube.com/feeds/users/AbrahamLingo/uploads?alt=json&callback=?';

var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/"+ videoID +"/hqdefault.jpg";
 alert(feedTitle);
});
});

</script>

Demo link :- http://jsfiddle.net/7gq6Y/

Upvotes: 2

Related Questions