title: Play videos retrieved from youtube api v3
body: <p>Using Youtube API V3, I can extract the thumbnails of videos from a user's activity feed (using the <a href="https://developers.google.com/youtube/v3/docs/activities#resource" rel="nofollow">activities</a> list from the api).</p>
  
  <p>What I am trying to achieve is, when the user clicks on the video, the video should be played. I have looked at iframes. however the activities list on the api, does not show how to get the url for the video, but a different the <a href="https://developers.google.com/youtube/v3/docs/videos#resource" rel="nofollow">Videos</a> resource shows a player.embedHtml field, however I am confused, how to integrate it to my code. </p>
  
  <pre><code>    var activityId, nextPageToken, prevPageToken, videoSnippet;
  
  // Once the api loads call a function to get the uploads playlist id.
  function handleAPILoaded() {
    requestUserUploadsactivityId();
  }
  
  //Retrieve the uploads playlist id.
  function requestUserUploadsactivityId() {
    // https://developers.google.com/youtube/v3/docs/channels/list
    var request = gapi.client.youtube.activities.list({
      // mine: '' indicates that we want to retrieve the channel for the authenticated user.
      home: 'true',
      part: 'snippet'
    });
    request.execute(function(response) {
      //structure of content.details
      //https://developers.google.com/youtube/v3/docs/channels#resource
      console.log(response);
      activityId = response.items[0].id;
      requestVideoPlaylist(activityId);
    });
  }
  
  // Retrieve a playist of videos.
  function requestVideoPlaylist(home, pageToken) {
    $('#video-container').html('');
    var requestOptions = {
      home: 'true',
      part: 'snippet',
      maxResults: 12
    };
    if (pageToken) {
      requestOptions.pageToken = pageToken;
    }
    var request = gapi.client.youtube.activities.list(requestOptions);
    request.execute(function(response) {
  
  
      var activityItems = response.result.items;
      if (activityItems) {
        // For each result lets show a thumbnail.
        jQuery.each(activityItems, function(index, item) {
          createDisplayThumbnail(item.snippet);
  
        });
      } else {
        $('#video-container').html('Sorry you have no activities on your feed');
      }
    });
  }
  
  
  // Create a thumbnail for a video snippet.
  function createDisplayThumbnail(videoSnippet) {
    var titleEl = $('&lt;h4&gt;');
    titleEl.addClass('video-title');
    $(titleEl).html(videoSnippet.title);
    var thumbnailUrl = videoSnippet.thumbnails.default.url;
     console.log(videoSnippet);
    var div = $('&lt;div&gt;');
    div.addClass('video-content');
    div.css('backgroundImage', 'url("' + thumbnailUrl + '")');
    div.append(titleEl);
    $('#video-container').append(div);
  }
  </code></pre>