title: lightbox video popup for youtube channel video
body: <p>When I click on the image video popups but does not play i.e. shows only loading symbol.</p>
  
  <p>My js code is</p>
  
  <pre><code>function showVideoList(channelid, rows, maxnumbervideos, apikey) {
          try {               
              var videoinfo = JSON.parse(getJSONData("https://www.googleapis.com/youtube/v3/search?order=date&amp;part=snippet&amp;channelId=" + channelid + "&amp;maxResults=" + maxnumbervideos + "&amp;key=" + apikey));
  
              var videos = videoinfo.items;
              var videocount = videoinfo.pageInfo.totalResults;
              // video listing                
  
               for (var j = 0; j &lt; 3; j++) {
               debugger;
                  //document.body.innerHTML+= "&lt;div class='row'&gt;" ;
                  // var div = document.getElementById("row");
                  //var append = "&lt;div class='row'&gt;"
                   $("#row").append("&lt;div class='row'&gt;&lt;/div&gt;");
  
                      for (var i = 0; i &lt; 3; i++) {
                          var videoid = videos[i].id.videoId;
                          var videotitle = videos[i].snippet.title;
                          var videodescription = videos[i].snippet.description;
                          var videodate = videos[i].snippet.publishedAt; // date time published
                          var videothumbnail = videos[i].snippet.thumbnails.default.url; // default, medium or high
                           $('div.row').last().append("&lt;div class='col s12 m4 l4'&gt;"
                              + "&lt;div class='blog-post'&gt;" + " &lt;div class='card'&gt; " + " &lt;div class='card-image'&gt; "
                              + "&lt;a href=https://www.youtube.com/watch?v=" + videoid + " target='_blank' class='voverlay'&gt;"
                              + "&lt;img src='" + videothumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + videotitle + "' title='" 
                              + videotitle + "' /&gt;&lt;/a&gt;"
                              +"&lt;/div&gt;" 
                              + " &lt;div class='card-content blog-post-content'&gt; "
                              + "&lt;h2&gt;&lt;a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'&gt;" + videotitle + "&lt;/a&gt;&lt;/h2&gt;" 
                              + " &lt;div class='meta-media'&gt; "
                              + "&lt;div class='single-meta'&gt;" + " Post By &lt;a href='#'&gt;Admin&lt;/a&gt;" + " &lt;/div&gt; "
                              + " &lt;div class='single-meta'&gt; " + "  Category : &lt;a href='#'&gt;Web/Design&lt;/a&gt; " + " &lt;/div&gt; "
                              + " &lt;/div&gt; "
                              + " &lt;div class='card-action'&gt; "
                              + "  &lt;a class='post-comment' href='#'&gt;&lt;i class='material-icons'&gt;comment&lt;/i&gt;&lt;span&gt;15&lt;/span&gt;&lt;/a&gt; "
                              + "  &lt;a class='readmore-btn' href='blog-single.html'&gt;Read More&lt;/a&gt; "
                              + " &lt;/div&gt; "                                
                              +"&lt;/div&gt;" + "&lt;/div&gt;" + "&lt;/div&gt;" + "&lt;/div&gt;"
                              );                      
                      }
                  document.body.innerHTML+="&lt;/div&gt;";
                  // append += "&lt;/div&gt;";
              //  div.innerHTML = append;
                  }   
          } catch (ex) {
              alert(ex.message);              
          }
      } 
  </code></pre>