Pausing an Youtube iframe with js

Question

I want to create a button that pauses the youtube video that is playing automatically.

This is the iframe:

<iframe id="music" width="0" height="0" src="https://www.youtube.com/embed/v_FucrYWy3k?rel=1&amp;controls=0&amp;showinfo=0&amp;start=1&autoplay=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

This is the button:

  <button onclick="mute()" type="button" name="button">mute</button>

And this the JS:

function mute(){
  var myVideo =  document.getElementById('music');
  myVideo.pauseVideo();
}

What am I missing?

Where do you define `iframe` and why would you call `getElementById('music')` which is the id of the iframe on the same iframe? Do you have any errors in your console? — Ionut Necula, Mar 06 '18 at 13:57
Guess I need to use document.getElementById, but thats also not working... — , Mar 06 '18 at 13:59
Possible duplicate of [How can I pause an embedded Youtube video with vanilla Javascript?](https://stackoverflow.com/questions/41693724/how-can-i-pause-an-embedded-youtube-video-with-vanilla-javascript) — Andrew Bone, Mar 06 '18 at 14:02
@Ionut Just changed it to `document.getElementById()`. Still not working. Error: `script.js:110 Uncaught TypeError: myVideo.pauseVideo is not a function at mute (script.js:110) at HTMLButtonElement.onclick (index.html:30) mute @ script.js:110 onclick @ index.html:30` — , Mar 06 '18 at 14:31

Ionut Necula · Accepted Answer · 2018-03-06T15:28:03.943

It seems that with the current Youtube API you have to do more than just add enablejsapi as a get parameter to the embed. You actually have to include the API script from here and also use the custom methods. You can take a look at the below code or run this working JSFiddle:

<iframe id="music" width="310" height="310" src="https://www.youtube.com/embed/v_FucrYWy3k?rel=1&amp;controls=1&amp;showinfo=0&amp;start=1&autoplay=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<button id='button' type="button" name="button">mute</button>

And the JS code:

//create the script for the API and append it to the DOM
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('music', {
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  document.getElementById('button').addEventListener('click', function() {
    player.pauseVideo();
  })
}

It's all in the docs here.

score -1 · Answer 2 · answered Mar 06 '18 at 14:02

-1

You better use youtube api for this.

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

answered Mar 06 '18 at 14:02

Sergo Kupreishvili

444
9
21

Link-only answers are generally [frowned upon](http://meta.stackexchange.com/a/8259/204922) on Stack Overflow. In time it is possible for links to atrophy and become unavailable, meaning that your answer is useless to users in the future. It would be best if you could provide the general details of your answer in your actual post, citing your link as a reference. – Andrew Bone Mar 06 '18 at 14:03

Pausing an Youtube iframe with js

2 Answers2