Need YouTube Videos to be loaded in a separate HTML page

JavaScript
1

index.html:

<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>



    <script type="text/javascript" src="assets/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="assets/lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/script.js"></script>
	<script type="text/javascript">
    function player() {

        var ID = document.getElementById('videoid').value;

 		 document.location.href = 'player.html?vid='+ID;

}
</script>

script.js:

var htmlString = "";
var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
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 > 50 ? 50 : 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" onclick="player()"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" onclick="player()">' + title + '</a></div></div><input type="text" name="videoid" id="videoid" value="' + videoID + '">';

	});
	$(el).html(htmlString);

	htmlString = '';
  });
}

player.html:

<div id="display"></div>



<script type="text/javascript" src="assets/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="assets/lib/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/script.js"></script>
	
<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;
}
</script>

Now, the problem is that, the YouTube Player in player.html file is always loading the very first video even if you click on 2nd, 3rd, or 4th or whatever. What is wrong?

3

What does it actually generate, that is incorrect? What does the end output look like? (cause… frankly i’m having trouble following the convoluted code structure you’ve got here…)

4

see above…

5

I am not sure about. If you can send me your email address then I can share the complete folder with you.

6

I’m pretty sure your problem is the 1 on the end of that quoted line.

7

What should be it if not 1?

8

At a guess, i.

9

Okay. I will give it a try and get back to you!

10

It didn’t make any affect. However, I have sorted out the issue and now it’s working fine. Now, all I need to display Published Date and Category in player.html.

I will post a new question with sorted details and send you the link so that you could have a look. Thanks!

11

Here’s the link to question:

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.