CODEWITHSUNDEEP
javascriptiframe
Furious Mountain
Furious Mountain

Reputation: 1543

Transfer iframe content to a new empty iframe

So basicly i got one Big iframe without any thing in it.. and then ive used the youtube api to search for youtube videos which comes in a new iframe. So i wonder if its possible to transfer one iframe with a video in it to another without any.. Here is a fiddle but of some reason i can't see the bigger player which i can see in my own website.. https://jsfiddle.net/74wfou72/4/

<div id ="player">  </div>
<iframe  class = "videon" height = "80" width = "120" frameborder = "0" 
     src ="//www.youtube.com/embed/bHQqvYy5KYo" showinfo = 0 controls=0 ></iframe>

with some java on the player too which you can see in the fiddle..

Thankfull for any help! (:

Upvotes: 0

Views: 65

Answers (1)

spaceman
spaceman

Reputation: 1167

You can add an event listener to a button which will extract the ID from the smaller iFrame and then use the YouTube API to create the bigger iFrame.

Example:

document.querySelector('#play').addEventListener('click', function() {
    var id = document.querySelector('.videon').getAttribute('src').split('/');
    id = id[id.length - 1];
    play(id);
});

var apiReady = false;
var player;

function onYouTubeIframeAPIReady() {
    apiReady = true;
}

function play(id) {
    if(apiReady) {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: id,
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }
}

If the API hasn't loaded, apiReady will be false and the YouTube player won't be created. You could add an error for that scenario if you wanted as feedback to the user.

The ID of the YouTube video needs to be the final parameter of the URL otherwise it won't work either.

Full coded example here

Upvotes: 1

Related Questions