Geek Answers Handbook

How to display youtube thumbnail with url using Angularjs

I am just starting to use angularjs and I want to display a thumbnail of youtube with a youtube video url ... is there a way to display a thumbnail of a video when people paste the url into the input and then click the button.

PLUNKER

http://plnkr.co/edit/9SBbTaDONuNXvOQ7lkWe?p=preview

+3
source share
3 answers

Youtube provides a default image thumbnail of its video.

You can use the sample URL below to create a sketch.

 http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

If you need to find the identifier from the given URL and create the URL as above, you will get a thumbnail.

controller

 app.controller('MyCtrl', ['$scope', function($scope) { $scope.inputs = []; $scope.addInput = function() { $scope.inputs.push({ field: '' }); } $scope.removeInput = function(index) { $scope.inputs.splice(index, 1); } $scope.set2 = function($ayd) { var thumb = getParameterByName(this.input.ayd, 'v'), url = 'http://img.youtube.com/vi/' + thumb + '/default.jpg'; this.thumb = url } function getParameterByName(url, name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), results = regex.exec(url); return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } } ]);

There are many ways to do this, you can send from here.

Working plunkr here

+3
source

Here is a simple Plunker that pulls the Youtube identifier from the entered filter URL and then applies the image URL to the image source using Youtube provided image paths .

app.js

 var app = angular.module('plunker', []); app.filter('getVideoId', function() { return function(input) { // get video id var output = input.substr(input.indexOf("=") + 1); return output; } })

index.html

 <body> <div> <input type="text" ng-model="input.url" placeholder="Youtube URL" /> <img class="ythumb" ng-src="http://img.youtube.com/vi/{{input.url | getVideoId}}/0.jpg"/> </div>

+2
source

With AngularJS

  • First you need to create a project in console.google.developers .
  • Enable YouTube API V3 API (Enabled).
  • In your account, create a public passkey.

In the VideoCtrl controller VideoCtrl for example:

 'use strict'; function init() { window.initGapi(); // Calls the init function defined on the window } angular.module('team') .service('googleService', ['$http', '$q', function ($http, $q) { var deferred = $q.defer(); this.googleApiClientReady = function () { gapi.client.setApiKey('YOUR API KEY'); gapi.client.load('youtube', 'v3', function() { var request = gapi.client.youtube.playlistItems.list({ part: 'snippet', playlistId: 'PLila01eYiSBjOtR8oqXkY0i5c1QS6k2Mu', maxResults: 8 }); request.execute(function(response) { deferred.resolve(response.result); }); }); return deferred.promise; }; }]) .controller('VideosCtrl', function ($scope, $window, $sce, googleService) { $window.initGapi = function() { $scope.$apply($scope.getChannel); }; $scope.getChannel = function () { googleService.googleApiClientReady().then(function (data) { $scope.channel = data; }, function (error) { console.log('Failed: ' + error) }); }; });

And don't forget the init API. Add this line at the end of your index.html

 <script src="https://apis.google.com/js/client.js?onload=init"></script>

For beginners, you might be interested in this answer: fooobar.com/questions/1202283 / ...

+2
source

More articles:


All Articles