Dynamic youtube iframe in javascript and jQuery

Question

I'm going crazy, trying to fix this and it wont work the way I want it to work,ahhh I feel like a 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 will call this function when the video player is 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 from input elements :)
    var search = $(searchBox).val();
    var checker = search.length;
    
    //Check if the input is empty string
    if(search!=''){
        //Declare the YoutubeAPI link with youtube APIkey
        var theAPI = "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+search+"&maxResults=15&key=AIzaSyA9ej5NSrEqzex76U_xE3PPJlb2rELrW9M";

        //Get JSON string from YoutubeAPI link
        $.getJSON(theAPI, function(data){

            //Append 5 titles to the div
            for(var i=0; i<=5; ++i){
                
                //Using the kind property from YoutubeAPI determine is it a 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 the input value is changing, if it does cleares the 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 is a question:

function onYouTubeIframeAPIReady(){
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: videoID,
        events: {
            'onReady': onPlayerReady
        }
    });
}

How to delete this player object and create a new one on a click event? I really want this working, please someone help :)

jlmcdonald · Accepted Answer · 2015-06-18 22:17:17Z

2

Is there a specific reason you want to destroy the player object and recreate it? If your goal is to just load a new video, you could always do this:

        $('div.search-box a').on('click', function(){                
            player.loadVideo($(this).data("id"));
            sessionStorage.setItem('key', $(this).data("id"));
        });

(you might need to declare the player variable in such a way that your click handler could access its scope, whether that be as a global, etc.)

However, if you really need to destroy the player itself and recreate it, I wonder if the problem lies in the fact that, on your click, you aren't changing the value of the 'videoID' variable (which the onYouTubePlayerAPIReady function needs to instantiate the new player); rather, you only change the value of the sessionStorage key.

answered Jun 18, 2015 at 22:17

jlmcdonald

13.7k2 gold badges61 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

The Bumpaster Over a year ago

I'll give it a try, I'm trying to make a youtube web app, well just playing around with it.

The Bumpaster Over a year ago

Okay, I tried, nothing happened, here is the problem, I want that the player stops, and loads a new video, but is not doing anything. I don't want to refresh the whole page, I don't want to open a new page, I want him when clicking on a link to load a new video on the same page. smth like: a.link -> on.click -> player.stop -> player.loadNew -> player.play

The Bumpaster Over a year ago

I worked it out using sessionStorage.set() and sessionStorage.clear(), changed the player.loadVideoById and it worked :) Thanks mate!

Collectives™ on Stack Overflow

Dynamic youtube iframe in javascript and jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related