CODEWITHSUNDEEP
javascriptdomyoutube
Lior Frenkel
Lior Frenkel

Reputation: 806

how to update DOM that embed youtube video whilst the video is being played?

I am updating a DOM object on a javascript front-end that plays youtube video (using the embed youtube).

Now, I want the page to refresh as soon as the DOM object is updated: I update the source of the video (URL), and would like the current video to stop, and the new video to start playing immediately.

I use 

document.getElementById("embed_id").src=newUrl.fetch_url;

where:

"embed_id" : is the id I gave the element of the youtube-embed object;

src : is the parameter where it takes the source url to play

newUrl.fetch_url : an internal parameter contains the url for the new video

Currently what happens is that when I look at the Javascript debugger, I can see the element and the src values got updated, but the original video is still played. How can I make the DOM get refreshed so the new video will start playing?

Upvotes: 1

Views: 795

Answers (2)

Lior Frenkel
Lior Frenkel

Reputation: 806

so eventually I didn't update, but append a new element:

var body = document.getElementById('body');
var newObject = currentObject.cloneNode(true);
newObject.childNodes[1].setAttribute('value',"http://www.youtube.com/v/"+newUrl.fetch_url+"?enablejsapi=1&version=3&autohide=1&showinfo=0?fs=1&autoplay=1");
$('body').append(newObject).hide().fadeIn(10000);

I used childNodes[i].setAttribute() to get to the right place to update.

As @Myles said I couldn't find a way to live update the DOM, but after this append, I will remove the old object.

Upvotes: 0

mylesagray
mylesagray

Reputation: 8869

Okay what you want to do is something like:

var embedded = document.getElementById("embed_id");
while (embedded.hasChildNodes()) {
    embedded.removeChild(embedded.firstChild);
}
//Re-run DOM insertion here.

This will remove all of embeddeds children to allow you to re-insert the youtube embed with the new URL.

Update:

This effectively 'touches' the DOM element, should be what you are looking for...

var other = element.nextSibling;

if ( other ) {
  other.parentNode.removeChild(element);
  other.parentNode.insertBefore(element,other);
} else {
  other = element.parentNode;
  other.removeChild(element);
  other.appendChild(element);
}

Source

Upvotes: 1

Related Questions