CODEWITHSUNDEEP
jqueryhtmlyoutube
CBeTJlu4ok
CBeTJlu4ok

Reputation: 1112

jQuery move youtube video while it's playing

I have a container in which youtube is playing video.

<div id="current-container"><span class="youtube"></span></div>

And I have another #new-container in which I want to move it after some event.

this is how I'm doing it:

jQuery('#new-container').html(jQuery('#current-container').find('span.youtube'))

the problem with it is that it stops playing and kind of makes new iframe.

I also tried clone() with span and iframe as well

here is a jsFiddle

any solution will do, even when keeping current video in its own container and just making copy. nothing worked so far.

Upvotes: 0

Views: 1208

Answers (1)

CtrlX
CtrlX

Reputation: 7015

When you write :

jQuery('#new-container').html(...)

jQuery rebuild a entire content as string, then put it inside your 'new-container' to recreate a Object inside.

The .append() method should work but not on iframe, as said here : moving iframe .

Maybe a good try is to put your 'current-container' in a fixed positionning, and place it at the exact position of the new-container. Something like this in jquery :

$('#current-container').css('position','fixed')
                       .offset($('#new-container').offset());

The .offset() change the position of your object but the DOM structure don't change. You can also change the size of current-container to fit the new-container size.

Hope this trick help !

Upvotes: 2

Related Questions