stopping an embedded video with javascript

Discussion:

Steve Taylor

2013-09-11 11:03:07 UTC

Hi folks,

Does anyone know how to stop the playing of an embedded video (e.g.
YouTube) using JavaScript?

I'm looking at the YT docs
(https://developers.google.com/youtube/player_parameters) and the WP
core source, but I'm having trouble finding how to target the actual
player object.

I'm embedding the actual video programmatically, something like this:

echo wp_oembed_get( $url . '&enablejsapi=1', array( 'width' => 500,
'height' => 362 ) );

Any pointers welcome!

Cheers,

Steve

Chris McCoy

2013-09-11 11:56:59 UTC

Permalink

ive used jquery to do this, where i have a thumbnail and they click to
play it.

http://blog.pixelthemes.com/demo/load-yt-video-dynamically/

Post by Steve Taylor
Hi folks,
Does anyone know how to stop the playing of an embedded video (e.g.
YouTube) using JavaScript?
I'm looking at the YT docs
(https://developers.google.com/youtube/player_parameters) and the WP
core source, but I'm having trouble finding how to target the actual
player object.
echo wp_oembed_get( $url . '&enablejsapi=1', array( 'width' => 500,
'height' => 362 ) );
Any pointers welcome!
Cheers,
Steve
_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Nikola Nikolov

2013-09-11 13:04:33 UTC

Permalink

Hi Steve. I've found out that usually the YouTube video will reload
itself(and stop unless it has autoplay) if it's visibility get's changed.
What I mean by this is that you can hide the video or one of it's
containing elements and show it again with jQuery(or other JavaScript), I
believe you can also change either z-index or the display CSS properties.

So if that's all you're looking for - I think you can try playing in this
direction, since it might be easier. Otherwise I'd look into the
documentation - can't help you with the JS API though :(

Post by Chris McCoy
ive used jquery to do this, where i have a thumbnail and they click to
play it.
http://blog.pixelthemes.com/demo/load-yt-video-dynamically/

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Chris McCoy

2013-09-11 15:48:19 UTC

Permalink

if you look

https://developers.google.com/youtube/js_api_reference

the player.stopVideo() will do what you want.

to do a hyper link to stop the video the example would be something like

// Get element holding the video (embed or object)
var player = document.getElementById("youtube_player");

function stop() {
if(player) {
player.stopVideo();
}
}

<a href="#" onclick="stop()">Stop Youtube Video</a>

hopefully this can guide you to something you can use.

Post by Nikola Nikolov
Hi Steve. I've found out that usually the YouTube video will reload
itself(and stop unless it has autoplay) if it's visibility get's changed.
What I mean by this is that you can hide the video or one of it's
containing elements and show it again with jQuery(or other JavaScript), I
believe you can also change either z-index or the display CSS properties.
So if that's all you're looking for - I think you can try playing in this
direction, since it might be easier. Otherwise I'd look into the
documentation - can't help you with the JS API though :(

Post by Chris McCoy
ive used jquery to do this, where i have a thumbnail and they click to
play it.
http://blog.pixelthemes.com/demo/load-yt-video-dynamically/

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Steve Taylor

2013-09-11 16:59:12 UTC

Permalink

FYI, what I'm dealing with is a carousel with images and videos.
Ideally I would pause a video if it's playing as it's scrolled out of
view in the carousel.

Post by Chris McCoy
// Get element holding the video (embed or object)
var player = document.getElementById("youtube_player");

Otto

2013-09-11 17:05:44 UTC

Permalink

Perhaps not. Try something like this:

http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html

-Otto

Post by Steve Taylor
FYI, what I'm dealing with is a carousel with images and videos.
Ideally I would pause a video if it's playing as it's scrolled out of
view in the carousel.

Post by Chris McCoy
// Get element holding the video (embed or object)
var player = document.getElementById("youtube_player");

I think this is what I'm looking for. But since wp_oembed_get()
outputs an iframe, I assume cross-domain stuff prevent me manipulating
the player? Do I need to do my own custom embedding to let me access
the API?
_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Nikola Nikolov

2013-09-11 17:07:57 UTC

Permalink

As a side note - I believe that pausing the carousel is the better solution
to this problem. I personally would dislike if I start watching a video and
then out of a sudden it scrolls out of view(no matter whether pausing or
not).

But that's just my opinion :)

Post by Otto
http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html
-Otto

Post by Steve Taylor
FYI, what I'm dealing with is a carousel with images and videos.
Ideally I would pause a video if it's playing as it's scrolled out of
view in the carousel.

Post by Chris McCoy
// Get element holding the video (embed or object)
var player = document.getElementById("youtube_player");

_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers

Chris McCoy

2013-09-11 17:18:38 UTC

Permalink

in one of my plugins i do my own youtube oembed, so it doesnt show the
iframe, i have mine formatting to use a sublime video html5 video player
instead of the iframe, you could intercept something like that, and go
that route maybe?

Post by Steve Taylor
FYI, what I'm dealing with is a carousel with images and videos.
Ideally I would pause a video if it's playing as it's scrolled out of
view in the carousel.

Post by Chris McCoy
// Get element holding the video (embed or object)
var player = document.getElementById("youtube_player");