Skip to main content

How to get a YouTube video thumbnail dynamically from the YouTube API using AngularJS



In this tutorial I have explain about the get YouTube thumbnail using AngularJS





<html ng-app id="YoutubeApp">

  <head>

    <title>

      How to get a YouTube video thumbnail dynamically from the YouTube API using  AngularJS Tutorials</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <script>

      function YoutubeController($scope) {

        $scope.todos = [];

        $scope.addVideo = function() {

          $scope.todos.push({text:$scope.todoText, done:false});

          $scope.todoText = '';

        };

     }

    </script>

    <style>

      .youtube-image {

        width: 150px;

        height: 100px;

      }

    </style>

  </head>

  <body>

    <h1>

     How to get a YouTube video thumbnail dynamically from the YouTube API using  AngularJS Tutorials

</h1>    

   <div ng-controller="YoutubeController">   

     <form ng-submit="addVideo()">

        <label>(Like : www.youtube.com/watch?v=jebJ9itYTJE)</label>

        <input type="text" ng-model="todoText"  size="30"

               placeholder="Enter Youtube Video Id here">

        <input class="btn-primary" type="submit" value="add">

     </form>

      <span ng-repeat="todo in todos">

        <img class="youtube-image" src="http://img.youtube.com/vi/{{todo.text}}/0.jpg" />

        <br/>

      </span>   

    </div>

 </body>

</html>

Youtube Video URL : www.youtube.com/watch?v=jebJ9itYTJE

 Video ID : jebJ9itYTJE 

 Enter the Video Id in Textbox

Output :




Comments

Post a Comment

Popular posts from this blog

PG::DuplicateTable: ERROR: relation "taggings" already exists in Ruby on Rails

Error: PG::DuplicateTable: ERROR:  relation "taggings" already exists Solution : Already the table present in your database.But migration also trying to create a table in database.For this reason error occurred. So try to remove the table (taggings) from your database.   postgresql :     > DROP TABLE IF EXISTS taggings;   Rails console :     > ActiveRecord::Migration.drop_table(:taggings)
1 comment
Read more

Simple Pagination in Ruby on Rails using will_paginate gem Tutorials

You should use the will_paginate gem for pagination. Steps : 1. Create new project    Develop > rails new addpagination 2. Open the gemfile inside the project folder (addpagination).Add below line in gemfile    gem 'will_paginate', '~> 3.0' 3. Enter below command in terminal and execute.    Develop > bundle install 4. Create the Database    Develop > rake db:create    5. Create the form using scaffolding    Develop > rails g scaffold post name:string city:string    6. Migrate the table    Develop > rake db:migrate    7. Now run the application    Develop > rails s   8. Check the application.Its working or not.    open browser and enter http://localhost:3000/    9. Configure the page redirection in routes.rb inside the config folder      root 'posts#index' 10. Now add t...
2 comments
Read more