get the first video in iframe with pagination using youtube data api?

Question

I want to Show only first video in iframe that is retrieved from youtube data api and other in thumnail.There is 10 records showing on every page in First page when first time the page is loaded it shows correctly but when i click on next page then the first video of second slot is not shown

I could not get that what should i do to do this.if you have any solution please tell me

    function tplawesome(template, data) {
    // initiate the result to the basic template
    res = template;
    // for each data key, replace the content of the brackets with the data
    for(var i = 0; i < data.length; i++) {
        res = res.replace(/\{\{(.*?)\}\}/g, function(match, j) { // some magic regex
            return data[i][j];
        });
    }
    return res;
}
var channelName= "TechGuyWeb";
$(document).ready(function(){
    $.get("https://www.googleapis.com/youtube/v3/channels",{
    part: 'contentDetails',
    forUsername: channelName,
    key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
    function(data){
    console.log(data);
    $.each(data.items,function(i, item){        
        var pid = item.contentDetails.relatedPlaylists.uploads;
        //console.log(pid);     
        getVids(pid);
    });
    }
    );
//var pid="10thStreetPreschool";

//    function getvids(pid){
//  $.get("https://www.googleapis.com/youtube/v3/playlistItems",{
//  part: 'snippet',
//  maxResults: 10,
//  playlistId:pid,
//  key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
//    function(data){
//  var output;
//  $.each(data.items,function(i, item){
//      console.log(data);
//      var v_id = item.snippet.resourceId.videoId;    
//      //alert(item.snippet.resourceId.videoId);
//      //var video_title = item.snippet.title;
//      //output= ''+video_title+'';
//      $.get("item.html",function(data){
//      $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
//      getcount(v_id);
//      });
//      //$('#results').append(output);
//  });
//    }
//    );
//    }
function getVids(pid, pageToken){
        var data = {
          part: 'snippet',
          maxResults: 10,
          playlistId: pid,
          key: 'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'
        }

        try{
          if(pageToken){
            data["pageToken"] = pageToken;
          }
        }catch(err){
        }

        $.get(
          "https://www.googleapis.com/youtube/v3/playlistItems", data,
          function(data){

        $('#results').html("");
            $.each(data.items,function(i, item){
        console.log(data);
        var v_id = item.snippet.resourceId.videoId;
//      var total_results =data.pageInfo.totalResults;
//      console.log(total_results);
        pos =item.snippet.position;
       //$('#thumbs').html("");
       //alert(item.snippet.length); 
        $.get("item.html",function(data){
        if(item.snippet.position==0){
        $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
        }
        //alert(item.snippet.thumbnails.default.url);
        });
        $('#thumbs').append(''+item.snippet.title+'');
        getcount(v_id);

        //$('#results').append(output);
    });
        $('#page').html("");
            try{
              if(data.prevPageToken){
        $("#page").append('« Previous');
              }
            }catch(err){
            }
    try{
              if(data.nextPageToken){
          $("#page").append('Next »');
        }
            }catch(err){
            }
          });
      }
    function getcount(v_id){
    $.get("https://www.googleapis.com/youtube/v3/videos",{
    part: 'statistics',
    id: v_id,
    key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
    function(data){
    $.each(data.items,function(i, item){

        var views = item.statistics.viewCount;
        //console.log(views);    
        $('#'+v_id).append(views);

    });
    }
    );
    }

});
// second function 
function getVids(pid, pageToken){             
        var data = {
          part: 'snippet',
          maxResults: 10,
          playlistId: pid,
          key: 'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'
        }

        try{
          if(pageToken){
            data["pageToken"] = pageToken;
          }
        }catch(err){
        }

        $.get(
          "https://www.googleapis.com/youtube/v3/playlistItems", data,
          function(data){
            var output;
        $('#results').html("");
            $.each(data.items,function(i, item){
        console.log(data);
        var v_id = item.snippet.resourceId.videoId;  
        //alert(item.snippet.position);
        //var video_title = item.snippet.title;
        //output= ''+video_title+'';
         var all_results = data.pageInfo.totalResults;
         var res_per_page= Math.ceil(data.pageInfo.totalResults/10);

         alert($(item.snippet.position+':first'));
        $('#thumbs').html("");
        $.get("item.html",function(data){
        //$('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
        //for(i=0;i<=res_per_page;i+10){
        if(item.snippet.position==0){
        $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
        //}
        }
        //$('#thumbs').append('');
        $('#thumbs').append(''+item.snippet.title+'');
        getcount(v_id);

        });
        //$('#results').append(output);
    });
        $('#page').html("");
            try{
              if(data.prevPageToken){

        $("#page").append('« Previous');
              }
            }catch(err){
            }
    try{
              if(data.nextPageToken){

         $("#page").append('Next »');
        }
            }catch(err){
            }
          });

      }
      function getcount(v_id){
    $.get("https://www.googleapis.com/youtube/v3/videos",{
    part: 'statistics',
    id: v_id,
    key:'AIzaSyBX94DoCYdtIwALVPfqSVar6izj3wCJ1M4'},
    function(data){
    $.each(data.items,function(i, item){

        var views = item.statistics.viewCount;
        console.log(views);  
        $('#'+v_id).append(views);

    });
    }
    );
    }
    function show_video(vid){
    $("#results").html("");
    $('#results').append('');
    }

Aasiya Mairaj · Accepted Answer

yes I have solution of this question. The solution is you have to just add this line of code and problem will be solved

in index.php file you have to add in style tag.

.item{display: none;}

and in script.js file you have to write this line of code

$.get("item.html",function(data){
        $('#results').append(tplawesome(data, [{"title":item.snippet.title,"videoid":item.snippet.resourceId.videoId,"description":item.snippet.description}]));
        $('.item:first').css('display','block');
        //$('#thumbs').append('');
        //$('#thumbs').append(''+item.snippet.title+'');
        $('#thumbs').append(''+item.snippet.title+'
'+item.snippet.description+'
Total Views: ');
        getcount(v_id);

        });

get the first video in iframe with pagination using youtube data api?

Answers (1)

Related Questions