stop youtube-iframe-video via js

Question

How to stop the (youtube) video on click? I've tried so much, but I can't get it working … what am I doing wrong? Regarding to the docs and hundreds of posts in the internet this should work like a charm … but it does not:

html:

<iframe width="420" height="315" src="https://www.youtube.com/embed/2BagaJFimzk?autohide=1&showinfo=0&rel=0&enablejsapi=1&origin=http%3A%2F%2Fjsfiddle.net" frameborder="0" allowfullscreen></iframe>
<button>please stop :(</button>

in js (with jquery and youtube-api loaded):

var thisvid;

function onYouTubePlayerAPIReady() {
    thisvid = new YT.Player($('iframe')[0]);
}

if (!thisvid) onYouTubePlayerAPIReady();

$('button').click(function () {
    thisvid.pauseVideo();
});

on jsfiddle

I can't create the video-iframe with JS … so I need a solution for a given iframe.

THX in advance!

You must create the video object using JavaScript, not HTML, in order to control it using the YouTube JavaScript API. http://stackoverflow.com/a/19854775/901048 — Blazemonger, Oct 26 '15 at 17:05
See the console for errors: `Uncaught TypeError: thisvid.pauseVideo is not a function` — Rayon, Oct 26 '15 at 17:05
@blazemonger regarding to this https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player it should work by creating it with HTML! and that is what i want to figure out! — John Doe Smith, Oct 26 '15 at 17:13
@RayonDabre I saw the errors … but how shall this help me? — John Doe Smith, Oct 26 '15 at 17:14
@RayonDabre Yes I did. you can see it in jsfiddle. otherwise I would get a lot more errors … — John Doe Smith, Oct 26 '15 at 17:24
@RayonDabre Thanks, but as mentioned in my Question: I'm not looking for this js-solution. Youtube API says it should work, but it doesn't. I want to get it work with iframe already existing :( — John Doe Smith, Oct 26 '15 at 17:40

score 2 · Accepted Answer · edited May 23 '17 at 12:31

Regarding to this answer, I found out that I made the following points wrong: 1. If "&origin=" is passed in iframe src -> it won't work. 2. at js-fiddle it only works if FWs & EXTs are loaded in body and not on load.

Well, that's all I need :) Here is a working fiddle.

and the code … … HTML:

<iframe width="420" height="315" src="https://www.youtube.com/embed/2BagaJFimzk?autohide=1&showinfo=0&rel=0&enablejsapi=1&origin=http%3A%2F%2Fjsfiddle.net" frameborder="0" allowfullscreen></iframe>
<button>please stop :(</button>

… and the JS (of course you have to embed https://www.youtube.com/iframe_api):

var thisvid;

function onYouTubePlayerAPIReady() {
    thisvid = new YT.Player($('iframe')[0]);
}

if (!thisvid) onYouTubePlayerAPIReady();

$('button').click(function () {
    thisvid.pauseVideo();
});

stop youtube-iframe-video via js

1 Answers1