Как отобразить полученные данные от youtube api в html в виде видео?

Question

[Евгений Ромашов]

Всем привет!

Подскажите, пожалуйста, как отобразить полученные данные от youtube api на странице html.

const apiKey = 'my_key';
const url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=heroes%3&type=video&key=my_key';
const mainVideo = document.getElementById('main_video')

fetch(url).then(function(response) {
	response.text().then(function(text) {
		let newText = JSON.parse(text)
	  	mainVideo.innerText = newText;
		  console.log(newText)
	});
});

<aside class="video main-content-right" id="main_video">
                <h2>Video Here</h2>
                <iframe src="" id="myIframe"></iframe>
</aside>

Сейчас отображает строкой, что объект. А если убрать метод json.parse, то будет просто много текста. Как попроавить ситуацию, данные то приходят...

Answer 1

[drawnofmymind]

В response data должно быть videoId

myIframe.src="videoId "

Comments

[Евгений Ромашов]

fetch(url).then(function(response) {
	response.text().then(function(text) {
		let newText = JSON.parse(text)
	  	mainVideo.innerText = newText;
		myIframe.src="videoId";
		  console.log(newText)
	});
});

Я вставил, не работает, наверно не так сделал...

[drawnofmymind]

const mainVideo = document.getElementById('myIframe')

fetch(url)
  .then(response => response.json())
  .then(data => {
   	 frame.src= data.snippet[0].resourceId.videoId;
  });

Нужно вставить в src ссылку,которая возвращается в дате покапай ответ который тебе приходит

[Евгений Ромашов]

Вроде бы нашёл правильный url, но стало выдавать 403 ошибку. Типа лимит исчерпан. Не знаю, опыта мало, то ли на сегодняшний день, то ли вообще по этому ключу. Короче ж... =)

Спасибо за помощь.