How Can I Pause An Embedded Youtube Video With Vanilla Javascript?

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 fa

Solution 1:

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.

Solution 2:

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.

Solution 3:

<aonclick="playVideoFunction()">Play video</a><aonclick="stopVideoFunction()">Stop video</a><iframeid="videoIframe"width="840"height="473"src="https://www.youtube.com/embed/dZ0fwJojhrs?feature=oembed"frameborder="0"allowfullscreen></iframe><scripttype="text/javascript">functionplayVideoFunction() { 
  document.getElementById("videoIframe").src += "&autoplay=1";}

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