Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
jQuery API Exercise Youtube Data WebSite
Rating: 4.3 out of 5(36 ratings)
4,070 students

jQuery API Exercise Youtube Data WebSite

AJAX connect to YouTube API get JSON data use it within your applications
Created byLaurence Svekis
Last updated 11/2024
English
English [Auto],

What you'll learn

  • Build a web application that uses AJAX
  • Connect and use data from YouTube API

Course content

2 sections20 lectures1h 11m total length
  • Introduction to using AJAX and getting JSON data3:10

    Explore building a jQuery AJAX app that queries the YouTube API, fetches JSON results, and updates the page without refresh, including a video popup and next and previous navigation.

  • Developer Setup and Environment2:58

    Set up your development environment for jQuery projects by using brackets, a browser, and developer tools to inspect pages, run JavaScript, and test queries.

  • web application setup4:15

    Set up a single-page front-end to connect to YouTube by obtaining a YouTube API key and Google credentials, and perform a jQuery ajax call to fetch and display API data.

  • Updated V3 Key URL0:05
  • YouTube Developer Key4:02

    Learn how to obtain and test a YouTube data api v3 key by creating a Google project, generating api credentials, and using the api key in a front-end application.

  • Bring in jQuery AJAX6:19

    Learn to build a jQuery Ajax call to the YouTube data API, pass the key and query parameters, and handle responses with search results and page tokens.

  • Source Code 30:09
  • Loop each Returned Video5:30

    Learn to fetch YouTube with an API key, set max results to 25, and loop through returned video items, handling page tokens to navigate next pages and display thumbnails.

  • Use JSON feed data9:48

    Explore how to pull json feed data from the YouTube data api, select fields like snippet, contentDetails, and statistics, and render video titles, thumbnails, and ids with pagination tokens.

  • Source Code 50:14
  • Output Results from API3:47

    connect to the youtube api and output video thumbnails and titles in an html layout with placeholders; progress toward playable videos via links or a popup player.

  • Customize Results for API6:49

    Learn how to customize API results in a jQuery project by adding a search input, page tokens, next and previous controls, and optional styling to refine output.

  • Source Code 70:22
  • Tweaks and Updates5:36

    Learn to implement next and previous navigation, use a token class for streamlined event handling, and link YouTube videos by id to display thumbnails, titles, and search results.

  • Source Code 80:24
  • Customize Code jQuery15:40

    Explore how to enhance a YouTube API search app by adding a jQuery-powered pop-up video player using an iframe, thumbnails, and click events that load the correct video by id.

  • Source Code 90:44
  • Course Resources0:03

Requirements

  • CSS, HTML and some basic JavaScript
  • Basic understanding of APIs
  • JavaScript Object Experience

Description

Get DATA from YouTube and use it in your own web applications

Perfect course to practice and learn more about jQuery AJAX and JSON.

Become more familiar with jQuery and working with what AJAX is and how you can use it to get JSON data.  In this project we show you how to connect to the YouTube Developer API and pull in video data and information.  This API is perfect to practice and get more comfortable with APIs.  There is so much data and its fun to work with.

Source Code is included to get you started quickly.

Please note this course is focused on an EXERCISE building an application from scratch using jQuery.  Prerequisites for this course include HTML, CSS, JavaScript DOM and jQuery.

The objective is to allow students to practice and explore what can be done

Course is taught by an instructor who is passionate about jQuery and ready to help you learn more about using jQuery.

Join now and see the amazing applications you can build with jQuery.

By the end of the course you will have the knowledge to build your own version of the application and make even better ones ;)

Who this course is for:

  • Anyone who wants to learn more about jQuery
  • Anyone who wants to practice connecting to APIs
  • Web developer
  • Anyone who wants to learn how to use JSON data from YouTube