Dynamic youtube iframe in javascript and jQuery -

i'm going crazy, trying fix , wont work way want work,ahhh feel child :/

var videoid;    var tag = document.createelement('script');    tag.src = "https://www.youtube.com/iframe_api";  var firstscripttag = document.getelementsbytagname('script')[0];  firstscripttag.parentnode.insertbefore(tag, firstscripttag);    videoid = sessionstorage.getitem("key");    var onyoutubeiframeapiready = function(){      player = new yt.player('player', {          height: '315',          width: '560',          videoid: videoid,          events: {              'onready': onplayerready          }      });  }    //the api call function when video player ready.  function onplayerready(event) {  event.target.playvideo();      console.log(videoid);  }    function searchquery() {      //declare selectors      var querycontainer = $('div.search-box ul');      var searchbox = $('div#search-bar input[type=search]');            //declare variables input elements :)      var search = $(searchbox).val();      var checker = search.length;            //check if input empty string      if(search!=''){          //declare youtubeapi link youtube apikey          var theapi = "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+search+"&maxresults=15&key=aizasya9ej5nsreqzex76u_xe3ppjlb2relrw9m";            //get json string youtubeapi link          $.getjson(theapi, function(data){                //append 5 titles div              for(var i=0; i<=5; ++i){                                    //using kind property youtubeapi determine profile or video                  if(data.items[i].id.kind === 'youtube#video'){                      $(querycontainer).append('<li><p><a href="#" data-id="' +data.items[i].id.videoid+'">' +data.items[i].snippet.title+'</a></p></li>');                  }else if(data.items[i].id.kind === 'youtube#channel'){                      $(querycontainer).append('<li><p><a href="https://www.youtube.com/user/'+data.items[i].snippet.title+'">' +data.items[i].snippet.title+'</a></p></li>')                  }              }              $('div.search-box a').on('click', function(){                                    $('div#player-box').empty();                  $('div#player-box').append('<div id="player"></div>');                  sessionstorage.setitem('key', $(this).data("id"));                                    onyoutubeiframeapiready();                                });          });            //check if input value changing, if cleares previous output          if(checker){              $(querycontainer).empty();          }                }else{          $(querycontainer).empty();          return false;      }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div id="player"></div>

here question:

function onyoutubeiframeapiready(){     player = new yt.player('player', {         height: '315',         width: '560',         videoid: videoid,         events: {             'onready': onplayerready         }     }); } 

how delete player object , create new 1 on click event? want working, please :)

is there specific reason want destroy player object , recreate it? if goal load new video, this:

        $('div.search-box a').on('click', function(){                             player.loadvideo($(this).data("id"));             sessionstorage.setitem('key', $(this).data("id"));         }); 

(you might need declare player variable in such way click handler access scope, whether global, etc.)

however, if need destroy player , recreate it, wonder if problem lies in fact that, on click, aren't changing value of 'videoid' variable (which onyoutubeplayerapiready function needs instantiate new player); rather, change value of sessionstorage key.