https://developers.google.com/youtube/v3/quickstart/js
Create or select a project in the API Console. Complete the following tasks in the API Console for your project:
In the library panel, search for the YouTube Data API v3. Click into the listing for that API and make sure the API is enabled for your project.
In the credentials panel, create two credentials:
Create an API key You will use the API key to make API requests that do not require user authorization. For example, you do not need user authorization to retrieve information about a public YouTube channel.
Create an OAuth 2.0 client ID Set the application type to Web application. You need to use OAuth 2.0 credentials for requests that require user authorization. For example, you need user authorization to retrieve information about the currently authenticated user's YouTube channel.
In the Authorized JavaScript origins field, enter the URL http://localhost:8000. You can leave the Authorized redirect URIs field blank.
https://console.developers.google.com/
https://developers.google.com/youtube/v3/docs/search/list?
https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&order=relevance&q=test&key=
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Project 5</title>
<style>
* {
box-sizing: border-box;
}
.output {
display: flex;
flex-wrap: wrap;
}
.search {
flex: 100%;
font-size: 2em;
}
.container {
flex: 50%;
font-size: 0.9em;
text-align: center;
}
.box {
padding: 5px;
border: 1px solid black;
}
.box p {
text-transform: uppercase;
}
.box img {
max-width: 100%;
}
.btn {
background-color: red;
color: white;
padding: 10px;
font-size: 1.2em;
display: block;
margin: auto;
cursor: pointer;
}
.btn:hover {
opacity: 0.8;
}
.searchQ {
line-height: 30px;
font-size: 1.2em;
width: 90%;
margin: auto;
display: block;
}
@media (max-width:680px) {
.container {
flex: 100%;
}
}
</style>
</head>
<body>
<h1>YouTube JSON data</h1>
<input type="text" class="searchQ">
<button class="btn">Search YouTube</button>
<div class="output"></div>
<script src="pro5.js"></script>
</body>
</html>const apiKey = '';
const baseurl = 'https://www.googleapis.com/youtube/v3/search';
//GET https://youtube.googleapis.com/youtube/v3/search?part=snippet&channelId=UCgsZ8_79Eclct_VDoql_Dwg&maxResults=10&order=relevance&q=test&key=[YOUR_API_KEY]
const btn = document.querySelector('.btn');
const output = document.querySelector('.output');
const searchQuery = document.querySelector('.searchQ');
btn.addEventListener('click', (e) => {
let q = searchQuery.value || 'test';
searchQuery.value = '';
let paras = '?part=snippet&channelId=UCgsZ8_79Eclct_VDoql_Dwg&maxResults=10&order=relevance';
let searchTerm = '&q=' + q;
let connKey = '&key=' + apiKey;
let url = baseurl + paras + searchTerm + connKey;
console.log(url);
fetch(url)
.then(rep => rep.json())
.then((data) => {
console.log(data);
output.innerHTML = `<div class="search">Search for ${q}</div>`;
data.items.forEach(item => {
const ele = makeCard(item);
output.append(ele);
});
})
.catch((error) => {
console.log(error);
})
})
function makeCard(data) {
console.log(data);
const vid = data.snippet;
const main = document.createElement('div');
main.classList.add('container');
const div1 = document.createElement('div');
div1.classList.add('box');
const thumbnail = vid.thumbnails.high.url;
const linkVideo = `https://www.youtube.com/watch?v=${data.id.videoId}`;
div1.innerHTML = `<p>${vid.title}</p><img src="${thumbnail}"> <div>${vid.description}</div><div>Link <a href="${linkVideo}" target="_blank">${linkVideo}</a></div>`;
main.append(div1);
return main;
}