jQuery move youtube video while it's playing

Question

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.

score 2 · Accepted Answer · edited May 23 '17 at 10:25

2

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 !

edited May 23 '17 at 10:25

Community

1
1

answered Oct 26 '13 at 02:38

CtrlX

6,946
1
17
21

sadly it does not work, but good point about reconstruction. I'll try to dig deeper – CBeTJlu4ok Oct 26 '13 at 02:40
2

ok, after googling, it's not possible to move iframe in the DOM without reloading. But let me edit with a trick – CtrlX Oct 26 '13 at 02:46
I guess this will be responsive solution, so I'll go with it – CBeTJlu4ok Oct 26 '13 at 03:03
if you scroll or if you resize the windows, you will probably have to refresh the positionning – CtrlX Oct 26 '13 at 03:07

jQuery move youtube video while it's playing

1 Answers1