Post
Ask Question

Get YouTube Channel Playlist Videos In SharePoint Content Editor WebPart

Introduction

In this article, I will explain how to get the YouTube Channel Playlist Videos in SharePoint Content Editor Web Part. The YouTube custom Web Part either selects a random YouTube video, a specific video, or channel videos from the specified SharePoint List or directly from YouTube. The Web Part can also be used to display a single static video or a YouTube Channel by specifying a YouTube URL field. The Web Part can be used with SharePoint 2010 and SharePoint 2013.

Prerequisite

The following prerequisite needs to be followed before getting YouTube Channel videos.

  1. Create the publishing site collection in SharePoint.

  2. Navigate to Site and click on “Settings” wheel. Click on “Add an app” or go to “View All site Content”. Then, click “Add an App”.

    Add an App

  3. Select “Pages” from the “Your Apps” page.

    Pages

  4. Click on Files -> New Document -> Pages.

    Pages

  5. Give Title, Description, URL Name, and select the Page Layout.

    Description

  6. Click on "Create" to create the page in "Page Library".

    Create

  7. Open the newly created page.

  8. Edit the page and click on “Add a Web Part”.

    Add a WebPart

  9. Add “Content Editor” Web Part from “Media and Content” category.

    Media and Content

  10. Now content editor Web Part gets added to the SharePoint page.

    content editor webpart

Get YouTube Channel Videos in Content Editor Web Part

  1. Click on “Edit Source” in “Format Text” tab of content editor Web Part.

    Edit Source

  2. HTML Source window will pop up.

    HTML Source

  3. Download any jQuery plugin JS file and add the JS file to any document library, like Style Library.

  4. Download the below Youmax JavaScript file and add the JS file to any document library, like Style Library.
    1. var youmax_global_options = {};    
    2.     
    3.         
    4. (function ($) {    
    5.     
    6.     
    7.     var secondsToTime = function(duration) {    
    8.         if(null==duration||duration==""||duration=="undefined")    
    9.             return "?";    
    10.     
    11.         var minutes = Math.floor(duration/60);    
    12.         //alert(minutes);    
    13.             
    14.         var seconds = duration%60;    
    15.     
    16.         if(seconds<10)    
    17.             seconds = "0"+seconds;    
    18.                 
    19.         var time = minutes+":"+seconds;    
    20.         return time;    
    21.         //alert()    
    22.             
    23.     },    
    24.         
    25.         //utility function to display time    
    26.     convertDuration = function(videoDuration) {    
    27.         var duration,returnDuration;    
    28.         videoDuration = videoDuration.replace('PT','').replace('S','').replace('M',':').replace('H',':');       
    29.             
    30.         //TODO: fix some duration settings    
    31.         //console.log('videoDuration-'+videoDuration);    
    32.             
    33.         var videoDurationSplit = videoDuration.split(':');    
    34.         returnDuration = videoDurationSplit[0];    
    35.         for(var i=1; i<videoDurationSplit.length; i++) {    
    36.             duration = videoDurationSplit[i];    
    37.             ////console.log('duration-'+duration);    
    38.             if(duration=="") {    
    39.                 returnDuration+=":00";    
    40.             } else {    
    41.                 duration = parseInt(duration,10);    
    42.                 ////console.log('duration else -'+duration)    
    43.                 if(duration<10) {    
    44.                     returnDuration+=":0"+duration;    
    45.                 } else {    
    46.                     returnDuration+=":"+duration;    
    47.                 }    
    48.             }    
    49.         }    
    50.         if(videoDurationSplit.length==1) {    
    51.             returnDuration="0:"+returnDuration;    
    52.         }    
    53.         return returnDuration;    
    54.             
    55.     },    
    56.     
    57.     
    58.     getDateDiff = function(timestamp) {    
    59.         if(null==timestamp||timestamp==""||timestamp=="undefined")    
    60.             return "?";    
    61.         //alert(timestamp);    
    62.         var splitDate=((timestamp.toString().split('T'))[0]).split('-');    
    63.         var d1 = new Date();            
    64.             
    65.         var d1Y = d1.getFullYear();    
    66.         var d2Y = parseInt(splitDate[0],10);    
    67.         var d1M = d1.getMonth();    
    68.         var d2M = parseInt(splitDate[1],10);    
    69.     
    70.         var diffInMonths = (d1M+12*d1Y)-(d2M+12*d2Y);    
    71.         /*alert(d1Y);  
    72.         alert(d2Y);  
    73.         alert(d1M);  
    74.         alert(d2M);  
    75.         alert(diffInMonths);  
    76.         */    
    77.         if(diffInMonths<=1)    
    78.             return "1 month";    
    79.         else if(diffInMonths<12)    
    80.             return  diffInMonths+" months";    
    81.             
    82.         var diffInYears = Math.floor(diffInMonths/12);    
    83.             
    84.         if(diffInYears<=1)    
    85.             return "1 year";    
    86.         else if(diffInYears<12)    
    87.             return  diffInYears+" years";    
    88.     
    89.     },    
    90.         
    91.     getReadableNumber = function(number) {    
    92.         if(null==number||number==""||number=="undefined")    
    93.             return "?";    
    94.                 
    95.         number=number.toString();    
    96.         var readableNumber = '';    
    97.         var count=0;    
    98.         for(var k=number.length; k>=0;k--) {    
    99.             readableNumber+=number.charAt(k);    
    100.             if(count==3&&k>0) {    
    101.                 count=1;    
    102.                 readableNumber+=',';    
    103.             } else {    
    104.                 count++;    
    105.             }    
    106.         }    
    107.         return readableNumber.split("").reverse().join("");    
    108.     },    
    109.         
    110.             
    111.     loadYoumax = function() {       
    112.     
    113.         youmaxWidgetWidth = $('#youmax').width();    
    114.             
    115.         $('#youmax').append('<div id="youmax-header"><div id="youmax-stat-holder"></div></div>');    
    116.     
    117.         //$('#youmax').append('<div id="youmax-tabs"></div>');    
    118.             
    119.         $('#youmax').append('<div id="youmax-tabs"><span id="featured_" class="youmax-tab">Featured</span><span id="uploads_" class="youmax-tab">Uploads</span><span id="playlists_" class="youmax-tab">Playlists</span></div>');    
    120.     
    121.             
    122.         $('#youmax').append('<div id="youmax-encloser"><iframe id="youmax-video" width="'+(youmaxWidgetWidth-2)+'" height="'+(youmaxWidgetWidth/youmax_global_options.youtubeVideoAspectRatio)+'" src="" frameborder="0" allowfullscreen></iframe><div id="youmax-video-list-div"></div><div id="youmax-load-more-div">LOAD MORE</div></div>');    
    123.             
    124.         $('#youmax-video').hide();    
    125.             
    126.         $('#youmax').append('<div id="youmax-lightbox"><div style="width:100%; position:absolute; top:20%;"><iframe id="youmax-video-lightbox" width="640" height="360" src="" frameborder="0" allowfullscreen></iframe></div></div>');    
    127.             
    128.         $('#youmax-lightbox').hide();    
    129.     },    
    130.         
    131.     //get channel Id if channel URL is of the form ....../user/Adele    
    132.     getChannelId = function(apiUrl) {    
    133.         //console.log('inside getChannelId');    
    134.         //console.log('apiUrl-'+apiUrl);    
    135.         //showLoader();    
    136.             
    137.         $.ajax({    
    138.             url: apiUrl,    
    139.             type: "GET",    
    140.             async: true,    
    141.             cache: true,    
    142.             dataType: 'jsonp',    
    143.             success: function(response) {     
    144.                 youmaxChannelId = response.items[0].id    
    145.                 getChannelDetails(youmaxChannelId);    
    146.             },    
    147.             error: function(html) { alert(html); },    
    148.             beforeSend: setHeader    
    149.         });    
    150.     },    
    151.     
    152.         
    153.     getChannelDetails = function(channelId) {    
    154.         
    155.         //var apiProfileURL = "http://gdata.youtube.com/feeds/api/users/"+youmaxUser+"?v=2&alt=json";    
    156.         var apiProfileURL = "https://www.googleapis.com/youtube/v3/channels?part=brandingSettings%2Csnippet%2Cstatistics%2CcontentDetails&id="+channelId+"&key="+youmax_global_options.apiKey;    
    157.     
    158.         $.ajax({    
    159.             url: apiProfileURL,    
    160.             type: "GET",    
    161.             async: true,    
    162.             cache: true,    
    163.             dataType: 'jsonp',    
    164.             success: function(response) { showInfo(response);},    
    165.             error: function(html) { alert(html); },    
    166.             beforeSend: setHeader    
    167.         });         
    168.     
    169.     },    
    170.         
    171.         
    172.     setHeader = function(xhr) {    
    173.         if(xhr && xhr.overrideMimeType) {    
    174.             xhr.overrideMimeType("application/j-son;charset=UTF-8");    
    175.         }    
    176.     },    
    177.         
    178.     showLoader = function() {    
    179.         youmax_global_options.youmaxItemCount = 0;    
    180.         $('#youmax-video-list-div').empty();    
    181.         $('#youmax-video').hide();    
    182.         $('#youmax-video').attr('src','');    
    183.         $('#youmax-video-list-div').append('<div style="text-align:center; height:200px; font:14px Calibri;"><br><br><br><br><br><br>loading...</div>');    
    184.     },    
    185.         
    186.     initFeaturedVideos = function () {    
    187.         youTubePlaylistURL = youmax_global_options.youTubePlaylistURL;    
    188.         console.log('inside init featured - '+youTubePlaylistURL);    
    189.         if(null!=youTubePlaylistURL&&youTubePlaylistURL.indexOf("youtube.com/playlist?list=")!=-1) {    
    190.             youmaxFeaturedPlaylistId = youTubePlaylistURL.substring(youTubePlaylistURL.indexOf("?list=")+6);    
    191.             youmax_global_options.youmaxFeaturedPlaylistId = youmaxFeaturedPlaylistId;    
    192.         }    
    193.     },    
    194.         
    195.     
    196.     
    197.     showInfo = function(response) {    
    198.         console.log('showInfo');    
    199.         console.log(response);    
    200.     
    201.         var channelData = response.items[0];    
    202.         var channelId = channelData.id;    
    203.         var channelName = channelData.snippet.title;    
    204.         var channelPic = channelData.snippet.thumbnails.default.url;    
    205.         var channelSubscribers = channelData.statistics.subscriberCount;    
    206.         var channelViews = channelData.statistics.viewCount;    
    207.         var channelDesc = "";    
    208.         var channelUploadsPlaylistId = channelData.contentDetails.relatedPlaylists.uploads;    
    209.     
    210.             
    211.             
    212.             
    213.         $('#youmax-header').append('<img id="youmax-header-logo" src="'+channelPic+'"/>'+channelName);    
    214.             
    215.         $('#youmax-header').append('    <div class="youmax-subscribe"><div class="g-ytsubscribe" data-channelid="'+channelId+'" data-layout="default" data-count="default"></div></div>');    
    216.             
    217.         //$('#youmax-stat-holder').append('<div class="youmax-stat">'+channelSubscribers+'<br/> subscribers </div><div class="youmax-stat">'+channelViews+'<br/>video views</div>');    
    218.             
    219.         //$('#youmax-stat-holder').append('<div class="youmax-stat"><span class="youmax-stat-count">'+getReadableNumber(channelViews)+'</span><br/> video views </div><div class="youmax-stat"><span class="youmax-stat-count">'+getReadableNumber(channelSubscribers)+'</span><br/>subscribers</div>');    
    220.             
    221.         //$('#youmax-channel-desc').append('About '+channelName+'<br/>'+channelDesc);    
    222.             
    223.         renderSubscribeButton();    
    224.             
    225.         $('#youmax-tabs').find('span[id^=uploads_]').attr('id','uploads_'+channelUploadsPlaylistId);    
    226.             
    227.         youmaxDefaultTab = youmax_global_options.youmaxDefaultTab;    
    228.             
    229.         if(typeof youmaxDefaultTab === 'undefined'||null==youmaxDefaultTab||youmaxDefaultTab==""||youmaxDefaultTab=="undefined") {    
    230.             $("#youmax-tabs span[id^=featured_]").click();    
    231.         } else if(youmaxDefaultTab.toUpperCase()=='UPLOADS'||youmaxDefaultTab.toUpperCase()=='UPLOAD') {    
    232.             $("#youmax-tabs span[id^=uploads_]").click();    
    233.         } else if(youmaxDefaultTab.toUpperCase()=='PLAYLISTS'||youmaxDefaultTab.toUpperCase()=='PLAYLIST') {    
    234.             $("#youmax-tabs span[id^=playlists_]").click();    
    235.         } else if(youmaxDefaultTab.toUpperCase()=='FEATURED'||youmaxDefaultTab.toUpperCase()=='FEATURED') {    
    236.             $("#youmax-tabs span[id^=featured_]").click();    
    237.         }    
    238.             
    239.             
    240.     },    
    241.     
    242.     renderSubscribeButton = function() {    
    243.         $.ajaxSetup({    
    244.           cache: true    
    245.         });    
    246.             
    247.         $.getScript("https://apis.google.com/js/platform.js")    
    248.         .done(function( script, textStatus ) {    
    249.             //alert( textStatus );    
    250.         })    
    251.         .fail(function( jqxhr, settings, exception ) {    
    252.             //alert( "Triggered ajaxError handler." );    
    253.         });         
    254.     },    
    255.     
    256.     
    257.     showPlaylists = function(response,loadMoreFlag) {    
    258.         console.log(response);    
    259.             
    260.         if(!loadMoreFlag) {    
    261.             $('#youmax-video-list-div').empty();    
    262.         }    
    263.     
    264.         var nextPageToken = response.nextPageToken;    
    265.         var $youmaxLoadMoreDiv = $('#youmax-load-more-div');    
    266.         //console.log('nextPageToken-'+nextPageToken);    
    267.             
    268.         if(null!=nextPageToken && nextPageToken!="undefined" && nextPageToken!="") {    
    269.             $youmaxLoadMoreDiv.data('nextpagetoken',nextPageToken);    
    270.         } else {    
    271.             $youmaxLoadMoreDiv.data('nextpagetoken','');    
    272.         }    
    273.             
    274.         youmaxColumns = youmax_global_options.youmaxColumns;    
    275.             
    276.         var playlistArray = response.items;    
    277.         var playlistIdArray = [];    
    278.         var zeroPlaylistCompensation = 0;    
    279.         for(var i=0; i<playlistArray.length; i++) {    
    280.             playListId = playlistArray[i].id;    
    281.             playlistSize = playlistArray[i].contentDetails.itemCount;    
    282.             if(playlistSize<=0){    
    283.                 zeroPlaylistCompensation++;    
    284.                 continue;    
    285.             }                   
    286.             playlistIdArray.push(playListId);    
    287.             playlistTitle = playlistArray[i].snippet.title;    
    288.             playlistUploaded = playlistArray[i].snippet.publishedAt;    
    289.             playlistThumbnail = playlistArray[i].snippet.thumbnails.medium.url;    
    290.             //playlistThumbnail = playlistThumbnail.replace("hqdefault","mqdefault");    
    291.             if((i+youmax_global_options.youmaxItemCount-zeroPlaylistCompensation)%youmaxColumns!=0)    
    292.                 $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%;" id="'+playListId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+playlistThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+playlistThumbnail+'\')"><div class="youmax-playlist-sidebar" id="youmax-playlist-sidebar-'+playListId+'"><span class="youmax-playlist-video-count"><b>'+playlistSize+'</b><br/>VIDEOS</span></div></div><span class="youmax-video-list-title">'+playlistTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(playlistUploaded)+' ago</span></div>');    
    293.             else    
    294.                 $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%; clear:both;" id="'+playListId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+playlistThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+playlistThumbnail+'\')"><div class="youmax-playlist-sidebar" id="youmax-playlist-sidebar-'+playListId+'"><span class="youmax-playlist-video-count"><b>'+playlistSize+'</b><br/>VIDEOS</span></div></div><span class="youmax-video-list-title">'+playlistTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(playlistUploaded)+' ago</span></div>');    
    295.                     
    296.         }    
    297.             
    298.         youmax_global_options.youmaxItemCount+=playlistArray.length-zeroPlaylistCompensation;    
    299.             //console.log(playlistIdArray);    
    300.                 
    301.         $('.youmax-video-tnail-box').click(function() {    
    302.             //alert(this.id);    
    303.             showLoader();    
    304.             playlistTitle = $(this).find(".youmax-video-list-title").text();    
    305.             getUploads("play_"+this.id,playlistTitle);    
    306.             //getPlaylistVideos(this.id);    
    307.         });    
    308.             
    309.         /* not sure why this is needed  
    310.         var youmaxTnailWidth = $('.youmax-video-tnail').css('width');  
    311.         youmaxTnailWidth=youmaxTnailWidth.substring(0,youmaxTnailWidth.indexOf("px"));  
    312.         var youmaxTnailHeight = youmaxTnailWidth/youtubeMqdefaultAspectRatio;  
    313.         //$('html > head').append('<style>.youmax-video-tnail{height:'+youmaxTnailHeight+'px;}</style>');      
    314.         $('div.youmax-video-tnail').css({'height':youmaxTnailHeight+'px'});  
    315.         */    
    316.             
    317.             
    318.         /*  
    319.         if(youmaxTnailHeight<130) {  
    320.             maxTopVideos = 3;  
    321.             $('html > head').append('<style>.youmax-playlist-video-count{margin: 10%;margin-top: 15%;}.youmax-playlist-sidebar-video{margin: 8% auto;}</style>');      
    322.             //$('div.youmax-playlist-video-count').css({'margin':'10%','margin-top':'15%'});  
    323.             //$('div.youmax-playlist-sidebar-video').css({'margin':'8% auto'});  
    324.         } else {  
    325.             maxTopVideos = 4;  
    326.         }*/    
    327.             
    328.         resetLoadMoreButton();    
    329.             
    330.         //console.log(youmaxTnailWidth);    
    331.         //console.log(youmaxTnailHeight);    
    332.     
    333.         //getTopVideosFromPlaylist(playlistIdArray,maxTopVideos);    
    334.     },    
    335.     
    336.     showUploads = function(response,playlistTitle,loadMoreFlag) {    
    337.         console.log(response);    
    338.     
    339.         if(!loadMoreFlag) {    
    340.             $('#youmax-video-list-div').empty();    
    341.                 
    342.             if(playlistTitle) {    
    343.                 $('.youmax-tab-hover').removeClass('youmax-tab-hover');    
    344.                 $('#youmax-video-list-div').append('<span class="youmax-showing-title youmax-tab-hover" id="uploads_'+response.items[0].snippet.playlistId+'" style="max-width:100%;"><span class="youmax-showing">  Showing playlist: </span>'+playlistTitle+'</span><br/>');    
    345.             }    
    346.         }    
    347.             
    348.         var nextPageToken = response.nextPageToken;    
    349.         var $youmaxLoadMoreDiv = $('#youmax-load-more-div');    
    350.         //console.log('nextPageToken-'+nextPageToken);    
    351.             
    352.         youmaxColumns = youmax_global_options.youmaxColumns;    
    353.             
    354.         if(null!=nextPageToken && nextPageToken!="undefined" && nextPageToken!="") {    
    355.             $youmaxLoadMoreDiv.data('nextpagetoken',nextPageToken);    
    356.         } else {    
    357.             $youmaxLoadMoreDiv.data('nextpagetoken','');    
    358.         }    
    359.             
    360.         var uploadsArray = response.items;    
    361.         var videoIdArray = [];    
    362.             
    363.         for(var i=0; i<uploadsArray.length; i++) {    
    364.             videoId = uploadsArray[i].snippet.resourceId.videoId;    
    365.             videoTitle = uploadsArray[i].snippet.title;    
    366.             //videoViewCount = uploadsArray[i].snippet.viewCount;    
    367.             //videoDuration = uploadsArray[i].snippet.duration;                 
    368.             videoUploaded = uploadsArray[i].snippet.publishedAt;    
    369.             videoThumbnail = uploadsArray[i].snippet.thumbnails.medium.url;    
    370.             //videoThumbnail = videoThumbnail.replace("hqdefault","mqdefault");    
    371.                 
    372.             videoIdArray.push(videoId);    
    373.                 
    374.             //$('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%;" id="'+videoId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+videoThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+videoThumbnail+'\')"><div class="youmax-duration">'+secondsToTime(videoDuration)+'</div></div><span class="youmax-video-list-title">'+videoTitle+'</span><br/><span class="youmax-video-list-views">'+getReadableNumber(videoViewCount)+' views | '+getDateDiff(videoUploaded)+' ago</span></div>');    
    375.     
    376.                                     
    377.             if((i+youmax_global_options.youmaxItemCount)%youmaxColumns!=0)    
    378.                 $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%;" id="'+videoId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+videoThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+videoThumbnail+'\')"><div class="youmax-duration"></div></div><span class="youmax-video-list-title">'+videoTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(videoUploaded)+' ago</span></div>');    
    379.             else    
    380.                 $('#youmax-video-list-div').append('<div class="youmax-video-tnail-box" style="width:'+((100/youmaxColumns)-4)+'%; clear:both;" id="'+videoId+'"><div class="youmax-video-tnail" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=\''+videoThumbnail+'\', sizingMethod=\'scale\'); background-image:url(\''+videoThumbnail+'\')"><div class="youmax-duration"></div></div><span class="youmax-video-list-title">'+videoTitle+'</span><br/><span class="youmax-video-list-views">'+getDateDiff(videoUploaded)+' ago</span></div>');    
    381.                 
    382.         }    
    383.             
    384.         youmax_global_options.youmaxItemCount+=uploadsArray.length;    
    385.             
    386.         $('.youmax-video-tnail-box').click(function(){    
    387.             //alert(this.id);    
    388.             //alert(showVideoInLightbox);    
    389.             if(youmax_global_options.showVideoInLightbox){    
    390.                 showVideoLightbox(this.id);    
    391.             } else {    
    392.                 $('#youmax-video').attr('src','https://www.youtube.com/embed/'+this.id);    
    393.                 $('#youmax-video').show();    
    394.                 $('html,body').animate({scrollTop: $("#youmax-header").offset().top},'slow');    
    395.             }    
    396.         });    
    397.             
    398.         // not sure why this is needed    
    399.         /*var youmaxTnailWidth = $('.youmax-video-tnail').css('width');  
    400.         youmaxTnailWidth=youmaxTnailWidth.substring(0,youmaxTnailWidth.indexOf("px"));  
    401.         var youmaxTnailHeight = youmaxTnailWidth/youmax_global_options.youtubeMqdefaultAspectRatio;  
    402.         //$('html > head').append('<style>.youmax-video-tnail{height:'+youmaxTnailHeight+'px;}</style>');      
    403.         $('div.youmax-video-tnail').css({'height':youmaxTnailHeight+'px'});*/    
    404.             
    405.     
    406.         getVideoStats(videoIdArray);    
    407.         resetLoadMoreButton();    
    408.     
    409.     },    
    410.     
    411.     
    412.     //get video stats using Youtube API    
    413.     getVideoStats = function(videoIdList) {    
    414.         //console.log('inside getVideoStats');    
    415.         //console.log(videoIdList);    
    416.         //showLoader();    
    417.             
    418.         apiVideoStatURL = "https://www.googleapis.com/youtube/v3/videos?part=statistics%2CcontentDetails&id="+videoIdList+"&key="+youmax_global_options.apiKey;    
    419.         $.ajax({    
    420.             url: apiVideoStatURL,    
    421.             type: "GET",    
    422.             async: true,    
    423.             cache: true,    
    424.             dataType: 'jsonp',    
    425.             success: function(response) { displayVideoStats(response);},    
    426.             error: function(html) { alert(html); },    
    427.             beforeSend: setHeader    
    428.         });    
    429.     },    
    430.     
    431.     //display video statistics    
    432.     displayVideoStats = function(response) {    
    433.         //console.log(response);    
    434.             
    435.         var videoArray = response.items;    
    436.         var $videoThumbnail;    
    437.     
    438.         for(var i=0; i<videoArray.length; i++) {    
    439.             videoId = videoArray[i].id;    
    440.             videoViewCount = videoArray[i].statistics.viewCount;    
    441.             videoViewCount = getReadableNumber(videoViewCount);    
    442.             videoDuration = videoArray[i].contentDetails.duration;    
    443.             //console.log('videoDuration-'+videoDuration);    
    444.                 
    445.             videoDuration = convertDuration(videoDuration);    
    446.             videoDefinition = videoArray[i].contentDetails.definition.toUpperCase();    
    447.             $videoThumbnail = $('#youmax-video-list-div #'+videoId);    
    448.             $videoThumbnail.find('.youmax-video-list-views').prepend(videoViewCount+' views | ');    
    449.             $videoThumbnail.find('.youmax-duration').append(videoDuration);    
    450.             //$videoThumbnail.append('<div class="youmax-definition">'+videoDefinition+'</div>');    
    451.                 
    452.         }    
    453.     },    
    454.     
    455.             
    456.     getUploads = function(youmaxTabId,playlistTitle,nextPageToken) {    
    457.         //showLoader();    
    458.         //var apiUploadURL = "http://gdata.youtube.com/feeds/api/users/"+youmaxUser+"/uploads/?v=2&alt=jsonc&max-results=50";    
    459.             
    460.         var pageTokenUrl = "";    
    461.         var loadMoreFlag = false;    
    462.             
    463.         if(null!=nextPageToken) {    
    464.             pageTokenUrl = "&pageToken="+nextPageToken;    
    465.             loadMoreFlag = true;    
    466.         }    
    467.     
    468.         var uploadsPlaylistId = youmaxTabId.substring(youmaxTabId.indexOf('_')+1);    
    469.         var apiUploadURL = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId="+uploadsPlaylistId+"&maxResults="+youmax_global_options.maxResults+pageTokenUrl+"&key="+youmax_global_options.apiKey;    
    470.     
    471.         console.log('apiUploadURL-'+apiUploadURL);    
    472.             
    473.         $.ajax({    
    474.             url: apiUploadURL,    
    475.             type: "GET",    
    476.             async: true,    
    477.             cache: true,    
    478.             dataType: 'jsonp',    
    479.             success: function(response) { showUploads(response,playlistTitle,loadMoreFlag);},    
    480.             error: function(html) { alert(html); },    
    481.             beforeSend: setHeader    
    482.         });    
    483.     },    
    484.         
    485.         
    486.         
    487.     getPlaylists = function(nextPageToken) {    
    488.     
    489.         var pageTokenUrl = "";    
    490.         var loadMoreFlag = false;    
    491.             
    492.         if(null!=nextPageToken) {    
    493.             pageTokenUrl = "&pageToken="+nextPageToken;    
    494.             loadMoreFlag = true;    
    495.         }    
    496.             
    497.         var apiChannelPlaylistsURL = "https://www.googleapis.com/youtube/v3/playlists?part=contentDetails,snippet&channelId="+youmaxChannelId+"&maxResults="+youmax_global_options.maxResults+pageTokenUrl+"&key="+youmax_global_options.apiKey;    
    498.     
    499.         //var apiPlaylistURL = "https://gdata.youtube.com/feeds/api/users/"+youmaxUser+"/playlists?v=2&alt=jsonc&max-results=50";       
    500.         $.ajax({    
    501.             url: apiChannelPlaylistsURL,    
    502.             type: "GET",    
    503.             async: true,    
    504.             cache: true,    
    505.             dataType: 'jsonp',    
    506.             success: function(response) { showPlaylists(response,loadMoreFlag);},    
    507.             error: function(html) { alert(html); },    
    508.             beforeSend: setHeader    
    509.         });    
    510.     },          
    511.     
    512.     showVideoLightbox = function(videoId) {             
    513.         $('#youmax-lightbox').show();    
    514.         $('#youmax-video-lightbox').attr('src','http://www.youtube.com/embed/'+videoId);    
    515.             
    516.         $('#youmax-lightbox').click(function(){    
    517.             $('#youmax-video-lightbox').attr('src','');    
    518.             $('#youmax-lightbox').hide();    
    519.         });    
    520.     },    
    521.             
    522.     resetLoadMoreButton = function() {    
    523.         var $youmaxLoadMoreDiv = $('#youmax-load-more-div');    
    524.         $youmaxLoadMoreDiv.removeClass('youmax-load-more-div-click');    
    525.         $youmaxLoadMoreDiv.text('LOAD MORE');    
    526.     },    
    527.         
    528.     prepareYoumax = function() {    
    529.         $('#youmax').empty();    
    530.         /*  
    531.         if(youTubeChannelURL.indexOf("youtube.com/user/")!=-1) {  
    532.             if(null!=youTubeChannelURL&&youTubeChannelURL.indexOf("?feature")!=-1)  
    533.                 youmaxUser = youTubeChannelURL.substring(youTubeChannelURL.indexOf("youtube.com/user/")+17,youTubeChannelURL.indexOf("?feature"));  
    534.             else  
    535.                 youmaxUser = youTubeChannelURL.substring(youTubeChannelURL.indexOf("youtube.com/user/")+17);  
    536.         }  
    537.           
    538.         console.log('youTubeChannelURL-'+youTubeChannelURL);  
    539.         console.log('youmaxUser-'+youmaxUser);  
    540.         //youmaxUser = 'UCVUZWBzxM7w8ug87qYwkBLg';  
    541.         //youmaxUser = 'AdeleVEVO';  
    542.         */    
    543.             
    544.         loadYoumax();    
    545.         showLoader();    
    546.             
    547.         $('.youmax-tab').click(function(){    
    548.             $('.youmax-tab-hover').removeClass('youmax-tab-hover');    
    549.             $(this).addClass('youmax-tab-hover');    
    550.             //$('.youmax-tab').css('color','#666');    
    551.             //$('.youmax-tab').css('background-color','#e6e6e6');    
    552.             //$('.youmax-tab').css('text-shadow','0 1px 0 #fff');    
    553.     
    554.             //$(this).css('color','#eee');    
    555.             //$(this).css('background-color','#999');    
    556.             //$(this).css('text-shadow','0 0');    
    557.                 
    558.             youmaxTabId = this.id;    
    559.                 
    560.             showLoader();    
    561.                 
    562.             if(youmaxTabId.indexOf("featured_")!=-1) {    
    563.                 getUploads('featured_'+youmax_global_options.youmaxFeaturedPlaylistId,null,null);    
    564.             } else if(youmaxTabId.indexOf("uploads_")!=-1) {    
    565.                 getUploads(youmaxTabId);    
    566.             } else if(youmaxTabId.indexOf("playlists_")!=-1) {    
    567.                 getPlaylists();    
    568.             }    
    569.         });    
    570.             
    571.         $('#youmax-load-more-div').click(function(){    
    572.     
    573.             var $youmaxLoadMoreDiv = $('#youmax-load-more-div');    
    574.             $youmaxLoadMoreDiv.html('LOADING..');    
    575.             $youmaxLoadMoreDiv.addClass('youmax-load-more-div-click');    
    576.                 
    577.             var youmaxTabId = $('.youmax-tab-hover').attr('id');    
    578.             var nextPageToken = $youmaxLoadMoreDiv.data('nextpagetoken');    
    579.             console.log('load more clicked : nextPageToken-'+nextPageToken);    
    580.                 
    581.             if(null!=nextPageToken && nextPageToken!="undefined" && nextPageToken!="") {    
    582.                 if(youmaxTabId.indexOf("featured_")!=-1) {    
    583.                     getUploads('featured_'+youmax_global_options.youmaxFeaturedPlaylistId,null,nextPageToken);    
    584.                 } else if(youmaxTabId.indexOf("uploads_")!=-1) {    
    585.                     getUploads(youmaxTabId,null,nextPageToken);    
    586.                 } else if(youmaxTabId=="playlists_") {    
    587.                     getPlaylists(nextPageToken);    
    588.                 }    
    589.             } else {    
    590.                 $youmaxLoadMoreDiv.html('ALL DONE');    
    591.             }    
    592.     
    593.         });         
    594.             
    595.         youTubeChannelURL = youmax_global_options.youTubeChannelURL;    
    596.             
    597.         //Get Channel header and details     
    598.         if(youTubeChannelURL!=null) {    
    599.             s=youTubeChannelURL.indexOf("/user/");    
    600.             ////console.log('s-'+s);    
    601.             if(s!=-1) {    
    602.                 userId = youTubeChannelURL.substring(s+6);    
    603.                 //console.log('userId-'+userId);    
    604.                 apiUrl = "https://www.googleapis.com/youtube/v3/channels?part=id&forUsername="+userId+"&key="+youmax_global_options.apiKey;    
    605.                 getChannelId(apiUrl);    
    606.             } else {    
    607.                 s=youTubeChannelURL.indexOf("/channel/");    
    608.                 if(s!=-1) {    
    609.                     youmaxChannelId = youTubeChannelURL.substring(s+9);    
    610.                     youmax_global_options.youmaxChannelId = youmaxChannelId;    
    611.                     //console.log('channelId-'+channelId);    
    612.                     getChannelDetails(youmaxChannelId);    
    613.                 } else {    
    614.                     alert("Could Not Find Channel..");    
    615.                 }    
    616.             }    
    617.         }    
    618.         
    619.     }           
    620.         
    621.         
    622.     $.fn.youmax = function(options) {    
    623.     
    624.             
    625.         //set local options    
    626.         youmax_global_options.apiKey = options.apiKey;    
    627.         youmax_global_options.youTubeChannelURL = options.youTubeChannelURL||'';    
    628.         youmax_global_options.youTubePlaylistURL = options.youTubePlaylistURL||'';    
    629.         youmax_global_options.youmaxDefaultTab = options.youmaxDefaultTab||'FEATURED';    
    630.         youmax_global_options.youmaxColumns = options.youmaxColumns||3;    
    631.         youmax_global_options.showVideoInLightbox = options.showVideoInLightbox||false;    
    632.         youmax_global_options.youmaxChannelId = '';    
    633.         youmax_global_options.maxResults = options.maxResults||15;    
    634.         youmax_global_options.youmaxItemCount = 0;    
    635.         youmax_global_options.youtubeVideoAspectRatio = 640/360;    
    636.         
    637.         //youmax_global_options.youmaxWidgetWidth = options.youmaxWidgetWidth||800;    
    638.         //youmax_global_options.showFeaturedVideoOnLoad = options.showFeaturedVideoOnLoad||false;    
    639.         youmax_global_options.youtubeMqdefaultAspectRatio = 300/180;    
    640.     
    641.         initFeaturedVideos();    
    642.         prepareYoumax();    
    643.         
    644.     };    
    645.         
    646.      
    647. }( jQuery ));   
  5. Download the below Youmax CSS file and add the CSS file to any document library, like Style Library.
    1. .youmax-showing {color:whitesmoke;font-weight:normal;  text-shadow: none;}    
    2.     
    3. .youmax-duration {background-color: black;color: white;padding: 2px 3px;font-weight: bold;position: absolute;bottom: 0;right: 0;opacity: 0.8;}    
    4.     
    5. #youmax-header {background-color:rgb(53,53,53);font:24px Arial;color:white;line-height:25px;height:90px;text-align:left;border: 1px solid rgb(53,53,53);position: relative;}    
    6.     
    7. .youmax-stat {float:right;margin:10px;font:10px Arial;color:#ccc;margin-top: 25px;text-align: center;}    
    8.     
    9. #youmax-stat-holder {float:right;height:100%;}    
    10.     
    11. .youmax-stat-count {font: 18px Arial;}    
    12.     
    13. #youmax-channel-desc {text-align:left;}    
    14.     
    15. #youmax {width:100%; max-width:1000px;background-color: rgb(230,230,230);margin:0px auto;font-family: Calibri;font-size: 14px;text-align:center; overflow-x:hidden;}    
    16.     
    17. .youmax-video-tnail {width:100%; background-repeat:no-repeat; background-size:cover;height:180px;position: relative;}    
    18.     
    19. .youmax-video-tnail-box {width:46%;margin:2%;float:left;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.2);cursor:pointer;cursor:hand;  background-color: white;}    
    20.     
    21. #youmax-encloser {border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;border-bottom: 1px solid #cccccc;  padding-top: 20px;}    
    22.     
    23. #youmax-video-list-div {width:100%;text-align:left;display: inline-block;background-color:rgb(230,230,230);   padding: 0px 15px; box-sizing: border-box;}    
    24.     
    25. .youmax-video-list-title {color:#438bc5;display: inline-block;padding:2% 10px; padding-bottom: 0px;font-weight:bold;max-width:250px;max-height:18px;overflow:hidden;}    
    26.     
    27. .youmax-video-list-views {color:#555;padding:1% 10px; padding-bottom: 3%;display:inline-block;font-size:12px;  font-family: Arial;}    
    28.     
    29. .youmax-playlist-sidebar {background-color:rgba(0,0,0,0.8);float:right;max-width:50%;height:100%;color:white;text-align:center;width: 70px;}    
    30.     
    31. .youmax-playlist-video-count {  display:inline-block;margin:3%;margin-top:5%;height:20%;  margin-top: 55px; }    
    32.     
    33. .youmax-playlist-sidebar-video {opacity:1;width:64px;height:20%;background-color:rgb(114,114,114);display:inline-block;margin:2% auto;background-size:cover;background-position: center center;background-repeat:no-repeat;}    
    34. .youmax-tab {background-color:rgb(230,230,230);color:#666;text-shadow:0 1px 0 #fff;display: inline-block;margin: 5px;margin-top: 10px;padding: 5px;cursor:pointer;cursor:hand;}    
    35.     
    36. #youmax-tabs {text-align:left;background-color:rgb(230,230,230);padding-left: 10px;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;     padding: 25px 30px 0px 30px;font-size: 18px;}    
    37.     
    38. #youmax-lightbox {position:fixed;background-color:rgba(0,0,0,0.9);z-index:100;width:100%;height:100%;left:0;top:0;}    
    39.     
    40. #youmax-video-lightbox {opacity:1;}    
    41.     
    42. .youmax-subscribe div {    
    43. position:static !important;    
    44. vertical-align: top !important;    
    45. }    
    46.     
    47. .youmax-subscribe iframe {    
    48. position:static !important;    
    49. }    
    50.     
    51. .youmax-subscribe{    
    52. display: inline-block;    
    53. width: 150px;    
    54. height: 25px;    
    55. overflow: hidden;    
    56. position: absolute;    
    57. top: 0;    
    58. margin: auto;    
    59. bottom: 0;    
    60. right: 0;    
    61. }    
    62.     
    63. #youmax-header-logo{    
    64. vertical-align:middle; height:60px; margin: 15px; display:inline-block;    
    65.   margin-left: 32px;    
    66. }    
    67.     
    68. div#youmax-load-more-div {    
    69.   /* height: 40px; */    
    70.   padding: 10px;    
    71.   margin: 15px 30px;    
    72.   font-size: 18px;    
    73.   border: 1px solid #ccc;    
    74.   cursor:pointer;    
    75. }    
    76.     
    77. .youmax-tab-hover {    
    78. color:#eee;    
    79. background-color:#999;    
    80. text-shadow:0 0;    
    81.     
    82. }    
    83.     
    84. .youmax-showing-title {    
    85. font-size: 18px;    
    86.   padding: 10px;    
    87.   margin-left: 20px;    
    88.   margin-bottom: 15px;    
    89.     display: inline-block;    
    90. }    
    91.     
    92. iframe#youmax-video {    
    93.   margin-bottom: 20px !important;    
    94. }    
    95.     
    96. .youmax-load-more-div-click {    
    97.     background: darkgray;    
    98.     color:white;        
    99. }    
    100.     
    101. #youmax-load-more-div:hover {    
    102.     background: darkgray;    
    103.     color:white;    
    104. }   
  6. Create one Google API Key to get the videos from YouTube.

  7. Get the YouTube Channel Video URL from the YouTube site that you want to display in Content Editor Web Part.

    https://www.youtube.com/channel/UCYfdidRxbB8Qhf0Nx7ioOYw

    YouTube Channel

  8. Get the YouTube Playlist Video URL from the YouTube site that you want to display in Content Editor Web Part.

    https://www.youtube.com/playlist?list=PL3ZQ5CpNulQmFrUkJrzmnegpttJATXZO4

    YouTube Channel

  9. After getting Google API Key, YouTube Channel ID, and Playlist ID, add that to YouMax jQuery plugin, as below:
    1. $('#youmax').youmax({    
    2.     
    3. apiKey:'HGDRHjjekkj4mkjd954HHHFGUu45jrt45',    
    4.     
    5. youTubeChannelURL:" https://www.youtube.com/channel/UCYfdidRxbB8Qhf0Nx7ioOYw",    
    6.     
    7. youTubePlaylistURL:" https://www.youtube.com/playlist?list=PL3ZQ5CpNulQmFrUkJrzmnegpttJATXZO4",    
    8.     
    9. youmaxDefaultTab:"PLAYLISTS", //can be UPLOADS or PLAYLISTS or FEATURED    
    10.     
    11. youmaxColumns:3,    
    12.     
    13. showVideoInLightbox:false,    
    14.     
    15. maxResults:15,    
    16.     
    17. });   
  10. Your channel playlist video will be added to the Content Editor Web Part using complete code snippets, as shown below.
    1. <script src="../Style%20Library/YouTubeChannel/jquery-1.9.1.min.js"></script>    
    2. <script src="../Style%20Library/YouTubeChannel/youmax.js"></script>    
    3. <link rel="stylesheet" href="../Style%20Library/YouTubeChannel/youmax.css"/>    
    4.     
    5. <div id="youmax"></div>    
    6. <script type="text/javascript">    
    7. $('#youmax').youmax({    
    8.             apiKey:'HGDRHjjekkj4mkjd954HHHFGUu45jrt45',    
    9.             youTubeChannelURL:" https://www.youtube.com/channel/UCYfdidRxbB8Qhf0Nx7ioOYw",    
    10.             youTubePlaylistURL:" https://www.youtube.com/playlist?list=PL3ZQ5CpNulQmFrUkJrzmnegpttJATXZO4",    
    11.             youmaxDefaultTab:"PLAYLISTS", //can be UPLOADS or PLAYLISTS or FEATURED    
    12.             youmaxColumns:3,    
    13.             showVideoInLightbox:false,    
    14.             maxResults:15,    
    15.         });    
    16. </script>   
  11. Thus, the YouTube channel videos are added to the SharePoint Page.

    YouTube Channel

Summary: So, you have learned how to get the YouTube Channel Playlist Videos in SharePoint Content Editor Web Part.


Similar Articles