How can I pause an embedded Youtube video with vanilla Javascript?

Question

I try to pause an iframe embedded YouTube video without a video-related event trigger.

I have read the youtube embedded api, this answer and this one and here is what I have so far (the video wont play in the snippet because of a CORS issue, but I guess it doesn't really matter.):

<iframe id="video1" width="560" height="315" src="http://www.youtube.com/embed/JFBUJ6kNl28" frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
  //youtube api to pause video when changing section
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player = false

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('video1', {});
  }

  function jump() {
    console.log(player);
    if (player) {
      player.pauseVideo()
    }
  }
</script>
<button type="button" onclick="jump()" name="button">pause button</button>

What am I missing? The player object is there when I log it but it throws me a player.pauseVideo() is not a function

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

I found the solution: as described in this answer, you need to add ?enablejsapi=1 to the video URL

A: You have to add ?enablejsapi=1 at the end of your URL: /embed/vid_id?enablejsapi=1

Somehow, it doesn't work with my snippet but works in my real case.

edited May 23 '17 at 12:10

Community

1
1

answered Jan 17 '17 at 10:10

Billybobbonnet

3,156
4
23
49

score 0 · Answer 2 · answered Mar 08 '18 at 12:03

You can simply use:

iframe.contentWindow.postMessage(message, origin);

to send message to iframeWindow, from parentWindow. All popular video services support listening those messages.

Check out the link below for the live demo:

https://codepen.io/mcakir/pen/JpQpwm

NOTE: The live demo checks whether or not the videos are in the ViewPort. The code block i use supports play/pause iframe videos from Youtube, vimeo and dailymotion (more will be added soon) without using any player's libraries or SDK's.

score -2 · Answer 3 · edited Jan 22 '18 at 15:26

-2

<a onclick="playVideoFunction()">Play video</a>
<a onclick="stopVideoFunction()">Stop video</a>

<iframe id="videoIframe" width="840" height="473" 
src="https://www.youtube.com/embed/dZ0fwJojhrs?feature=oembed" 
frameborder="0" allowfullscreen></iframe>

<script type="text/javascript">
function playVideoFunction() { 
  document.getElementById("videoIframe").src += "&autoplay=1";}

function stopVideoFunction() { 
  var ysrc = document.getElementById("videoIframe").src;    
  var newsrc = ysrc.replace("&autoplay=1", "");
  document.getElementById("videoIframe").src = newsrc;
}
</script>

edited Jan 22 '18 at 15:26

jHilscher

1,810
2
25
29

answered Jan 22 '18 at 15:13

Sandeep Saini

1
1

1

please explain how this helps the asker. – serakfalcon Jan 22 '18 at 16:22
Enigmatic post. Give a LOT more detail about your issue otherwise nobody will even read your code snippet. – Stphane Jan 22 '18 at 19:50

How can I pause an embedded Youtube video with vanilla Javascript?

3 Answers3

Linked