Youtube API with Angular

I spent a few hours the other day to incorporate youtube on this site. You can check it out by clicking the videos tab.

The first thing you need to do is get a an youtube API key from https://console.developers.google.com

Then added AngularJS on the index page where I planned on displaying searchable youtube videos.

Step 1

  • create a basic angular app
var app = angular.module( 'webPortfolio', [  ] );

app.config([
  "$sceDelegateProvider", function($sceDelegateProvider){
    $sceDelegateProvider.resourceUrlWhitelist([
      // Allow same origin resource loads.
      'self',
      // Allow loading from our assets domain. **.
      'https://www.youtube.com/embed/**'
    ]);
  }
])

Step 2

  • build your controller
app.controller('youtubeController', ['$scope', 'indexFactory', '$timeout', function($scope, indexFactory, $timeout){

    $scope.youtube = 'web development' //default search term

    $scope.youtubeSearch = function(searchTerm) {
        indexFactory.getYoutube(searchTerm, function(data) {
    //setup a timeout function to delay search from starting until i have a few letters typed
            $timeout(function(){
                $scope.videos = data.data.items
                $scope.videoId = $scope.videos[0].id.videoId // by default I display the frist item in the array
                $scope.videoDetails = $scope.videos[0].snippet
                $scope.youtubeUrl = 'https://www.youtube.com/embed/'+$scope.videoId 
            }, 500)

        })
    }

    $scope.youtubeSearch($scope.youtube)

    $scope.getVideo = function(video) {

        $scope.videoId = video.id.videoId
        $scope.videoDetails = video.snippet
        $scope.youtubeUrl = 'https://www.youtube.com/embed/'+$scope.videoId
    }

}]);

Step 3

  • Now for the factory to make the api request
app.factory('indexFactory', ['$http', '$location', function($http, $location){

    var factory = {};

    factory.getYoutube = function(term, callback) {

        var params = {
            part: 'snippet',
            key: 'YOUR API KEY',
            q: term,
            type: 'video',
            maxResults: 15
        };

        $http.get('https://www.googleapis.com/youtube/v3/search', {params: params}).then(function(data){
            callback(data);
        })
    }


    return factory;
}])

Finally some HTML to fill out the page.

  <div ng-controller="youtubeController" class="container">
    <div><h2 align="center" style="margin-top: 20px;">Search Youtube</h2></div>
    <div class='search-bar'>
      <input type="text" name="" ng-model="youtube" value="{{youtube}}" class="search-bar form-control" ng-change="youtubeSearch(youtube)" />
    </div>
    <div class="row">
        <div class="col-md-8 video-detail">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" allowFullScreen='allowFullScreen' src="{{youtubeUrl}}"></iframe>
          </div>
          <div class="details">
            <strong>Title</strong>
            <div>{{videoDetails.title}}</div>
            <hr>
            <strong>Description</strong>
            <div>{{videoDetails.description}}</div>
          </div>  
        </div>
        <div class="col-md-4 pull-right overflow">
            <div ng-repeat="video in videos">
              <ul class="list-group">
                <li class="list-group-item " ng-click="getVideo(video)">
                  <div class="video-list media">
                    <div class="media-left">
                      <img class="media-object" src="{{video.snippet.thumbnails.default.url}}" />
                    </div>
                    <div class="media-body">
                      <div style="margin-left: 8px;" class="media-heading">{{video.snippet.title}}</div>
                    </div>
                  </div>
                </li>            
              </ul>
            </div>          
        </div>     
    </div>    
  </div> 

I probably need to explain the steps in greater detail, but if you have any questions leave me a comment and I will get back to you.

0 Comments below

Back

Please log in to leave a comment