I have two HTML pages i.e. index.html and player.html. On index.html, I have loaded multiple playlists so that when the user clicks on any video it opens player.html in a new tab and load the video in YouTube Player.
The problem is that on player.html, I have succeed to get the Video Title in a div but I am not sure how can I add Published Date and Category Name.
Here is my HTMLs:
index.html
<section id="programs">
<div class="row">
<div class="col-sm-8">
<h3>Banking</h3>
<div id="youtube-playlist-feed_1"></div>
</div>
<div class="col-sm-4">
<div class="row">
<h3>Sponsors</h3>
</div>
</div>
</div>
</section>
<section id="programs">
<div class="row">
<div class="col-sm-8">
<h3>Business</h3>
<div id="youtube-playlist-feed_2"></div>
</div>
<div class="col-sm-4">
<div class="row">
</div>
</div>
</div>
</section>
player.html
<div id="vtitle"></div>
<div id="display"></div>
<div id="published"></div>
<div id="category"></div>
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315"
src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
var id = videoId;
var url = 'https://www.youtube.com/watch?v=' + id;
$.getJSON('https://noembed.com/embed',
{format: 'json', url: url}, function (data) {
document.getElementById('vtitle').innerHTML=(data.title);
});
}
</script>
script.js
var htmlString = "";
var apiKey = 'AIzaSyA7dAzzNvPCxTSsSGiV7dvoj3rkt0qbdXg';
var playlistID = 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt';
var maxResults = 7;
var playlists = [{
playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50',
el: '#youtube-playlist-feed_1'
},
{
playlistId: 'PLJYHm_ZxWCKmIBkoopKFK4kTTOmC1Zof0',
el: '#youtube-playlist-feed_2'
},
{
playlistId: 'PLBhKKjnUR0XAM2Wvi7JY5gLRpFLzIE-An',
el: '#youtube-playlist-feed_3'
}
];
playlists.forEach(function(playlist) {
getVideoFeedByPlaylistId(playlist.playlistId, playlist.el);
})
function getVideoFeedByPlaylistId(playlistId, el) {
$.getJSON('https://www.googleapis.com/youtube/v3/playlistItems?key=' + apiKey + '&playlistId=' + playlistId + '&part=snippet&maxResults=' + (maxResults > 3 ? 3 : maxResults), function(data) {
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var videoURL = 'https://www.youtube.com/watch?v=' + videoID + '&list=' + playlistID + '&index=1';
htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="player.html?vid='+videoID+'" ><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" id="player" href="player.html?vid='+videoID+'">' + title + '</a></div></div>';
});
$(el).html(htmlString);
htmlString = '';
});
}
That information is not published by the noembed.com json return, according to their site.
I am not sure about that. I just want to display publish date and playlist name. any other trick?
Well, I read their website and that’s what it says.
You can probably get the information out of YouTube’s API.
I tried to get the information but I am unable to get Published date and playlist name.
Show us what you’ve done then?
Oh nevermind, i see what you’ve done. I thought you were getting the title from noembed, but you’re getting it from… both… noembed and YouTube.
So… what does the console say is in item ? (console.log(item) inside the proper function)
I am sorry I couldn’t understand your question.
Well, there are no errors in console except:
Error parsing header X-XSS-Protection: 1; mode=block; report=https://www.google.com/appserve/security-bugs/log/youtube: insecure reporting URL for secure page at character position 22. The default protections will be applied.
So. Where you get the title from youtube, put in a line that reads console.log(item), and it should put into the console what i would assume to be an object. Which you can open up, and look through. And there you can see what information is available to you from your request.
It’s saying:
Uncaught ReferenceError: item is not defined
at :1:13
Now, I tried to update the following script but it’s not working. Just like, it’s getting ‘Title’ from the generated URL, why it’s not getting ‘Published Date’?
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
var id = videoId;
var url = 'https://www.youtube.com/watch?v=' + id;
$.getJSON('https://noembed.com/embed',
{format: 'json', url: url}, function (data) {
document.getElementById('vtitle').innerHTML=(data.title);
$.getJSON('https://noembed.com/embed',
{format: 'json', url: url}, function (data) {
document.getElementById('published').innerHTML=(data.publishedAt);
});
});
}
</script>
Because the noembed doesnt give you the published date, as I said. Its the YouTube pull (the one in your player.html) that might be returning it. That’s the one you should be logging item inside.
$.each(data.items, function(i, item) {
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
=>
$.each(data.items, function(i, item) {
console.log(item)
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
I tried to add these functions but it gave me nothing but the blank screen.
This is how I tried to implement the code:
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
var id = videoId;
var url = 'https://www.youtube.com/watch?v=' + id;
$.getJSON('https://noembed.com/embed',
{format: 'json', url: url}, function (data) {
document.getElementById('vtitle').innerHTML=(data.title);
});
$.each(data.items, function(i, item) {
console.log(item)
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var url = 'https://www.youtube.com/watch?v=' + videoID;
var output = 'Hi';
document.getElementById('published').innerHTML = output;
});
}
</script>
It’s giving me the following error in Console:
Uncaught TypeError: Cannot read property ‘length’ of undefined
at Function.each (jquery.min.js:2)
at window.onload (player.html?vid=Un5SEJ8MyPc:50)
each @ jquery.min.js:2
window.onload @ player.html?vid=Un5SEJ8MyPc:50
load (async)
(anonymous) @ player.html?vid=Un5SEJ8MyPc:28
So why did you move that block of code outside of the }); ?
Even after putting inside the block as below it’s giving me the same error in Console:
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
var id = videoId;
var url = 'https://www.youtube.com/watch?v=' + id;
$.getJSON('https://noembed.com/embed',
{format: 'json', url: url}, function (data) {
document.getElementById('vtitle').innerHTML=(data.title);
$.each(data.items, function(i, item) {
console.log(item)
var videoID = item['snippet']['resourceId']['videoId'];
var title = item['snippet']['title'];
var url = 'https://www.youtube.com/watch?v=' + videoID;
var output = 'Hi';
document.getElementById('published').innerHTML = output;
});
});
}
</script>
… wait, i… okay, i can see why the console’s throwing that error now… you’ve pulled the $.each of the youtube getJSON and just slapped it in.
Take the $.each block back out of the noembed getJSON, and wrap it in the Youtube getJSON as you have it in player.html.
It’s still not working. Here is my code according to your suggestion:
<script type="text/javascript">
window.onload = function () {
var url = document.location.href,
params = url.split('?')[1].split('&'),
data = {}, tmp;
for (var i = 0, l = params.length; i < l; i++) {
tmp = params[i].split('=');
data[tmp[0]] = tmp[1];
}
var videoId = data.vid;
var output = '<iframe width="420" height="315" src="https://www.youtube.com/embed/'+videoId+'"></iframe>';
document.getElementById('display').innerHTML = output;
var id = videoId;
var url = 'https://www.youtube.com/watch?v=' + id;
$.getJSON('https://noembed.com/embed',
{format: 'json', url: url}, function (data) {
document.getElementById('vtitle').innerHTML=(data.title);
});
function videodetails(){
$.getJSON('https://www.youtube.com/watch?v=', function(data){
$.each(data.items, function(i, item) {
console.log(item)
var videoID = item['snippet']['resourceId']['videoId'];
var cat = item['snippet']['title'];
var output = cat;
document.getElementById('published').innerHTML = output;
});
});
}
}
</script>