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

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', [  ] );

  "$sceDelegateProvider", function($sceDelegateProvider){
      // Allow same origin resource loads.
      // Allow loading from our assets domain. **.

Step 2

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

    $ = '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
                $scope.videos =
                $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 = ''+$scope.videoId 
            }, 500)



    $scope.getVideo = function(video) {

        $scope.videoId =
        $scope.videoDetails = video.snippet
        $scope.youtubeUrl = ''+$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('', {params: params}).then(function(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 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 class="details">
        <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 class="media-body">
                      <div style="margin-left: 8px;" class="media-heading">{{video.snippet.title}}</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


Please log in to leave a comment