Need YouTube Videos to be loaded in a separate HTML page

Question

I have loaded Playlist items in my Home Page like this:

HTML:

<div id="youtube-playlist-feed_1"></div>
<div id="youtube-playlist-feed_2"></div>
<div id="youtube-playlist-feed_3"></div>

My Script to load Playlist is:

            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" href="' + videoURL + '"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="' + videoURL + '">' + title + '</a></div></div>';
                });
                $(el).html(htmlString);

                htmlString = '';
              });
            }

Now, I have a separate page i.e. Player.html where I would like to have a YouTube Player and load the videos. For example, if a user clicks on 1st item of the playlist, that should be loaded in Player.html where I have my YouTube Player. How can I achieve this?

Do you mean [include html page in another file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file)? — Jakub, Mar 26 '18 at 08:21
No, I have video links loaded in Home Page. Now, the scenario is that: when user clicks on 1st video, it should be played in YouTube Player which is on player.html — Obaid, Mar 26 '18 at 08:36

score 0 · Answer 1 · answered Mar 26 '18 at 08:30

First of all pass VideoID in a href by writing this as a href

    <div class="video-wrap"><div class="video">
<a target="_blank" href="player.php?id=' + videoID+ '">
<img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a>
</div>' + '<div class="title"><a target="_blank" href="player.php?id=' + videoID+ '">' + title + '</a></div></div>

Now in Player.php

Use GET method to get your id variable like : $id = $_GET['id']; in this file use this code to play video

<iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $id; ?>" frameborder="0" allowfullscreen></iframe>

score 0 · Answer 2 · answered Mar 26 '18 at 12:30

In Your Videos displaying html file you have to write something like this:

<a onclick="player()" >Watch</a>

<script type="text/javascript">
    function player() {

         videoid = 'a9Vh9TZkdSM'; //Your Video id

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

}
</script>

And in

Player.html

Something like this:

<div id="display"></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/tgbNymZ7vqY"></iframe>';
     document.getElementById('display').innerHTML = output;
}
</script>

score 0 · Accepted Answer · answered Mar 26 '18 at 16:26

In Your script where you are loading playlist items replace this code just htmlString

 htmlString += '<div class="video-wrap"><div class="video"><a target="_blank" href="#" onclick="player()"><img src="https://i.ytimg.com/vi/' + videoID + '/mqdefault.jpg"></a></div>' + '<div class="title"><a target="_blank" href="#" onclick="player()">' + title + '</a></div></div><input type="text" name="videoid" id="videoid" value="'+videoID+'" hidden>';

At the end of Index.html file:

Past this code:

<script type="text/javascript">
    function player() {

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

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

}
</script>

And in your player.html file

<div id="display"></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;
}
</script>

Need YouTube Videos to be loaded in a separate HTML page

3 Answers3