9626

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 <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow">youtube embedded api</a>, <a href="https://stackoverflow.com/a/41406126/3793161" rel="nofollow">this answer</a> and <a href="https://stackoverflow.com/a/23369988/3793161" rel="nofollow">this one</a> 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.):

<pre class="snippet-code-html lang-html prettyprint-override"><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

Answer1:

I found the solution: as described in <a href="https://stackoverflow.com/a/7513356/3793161" rel="nofollow">this answer</a>, you need to add ?enablejsapi=1 to the video URL

<blockquote>

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

</blockquote>

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

Answer2:

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.

Answer3:

<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>

Recommend

  • youtube-iframe-api remove suggestion thumbnails at bottom of video
  • Add defer or async attribute to dynamically generated script tags via javascript
  • YouTube Player API - Playlist how to get the current video playing
  • Problem with sockets and OutOfMemory error
  • Visual Studio closes documents after running
  • Threading in Java
  • draw9patch just hangs on Mac 10.7.5
  • Android SAXParser, parse into array and get child nodes
  • Difference between File>Close and :close in Vim
  • How can i create a big file in google drive with google app script?
  • How to add header and Footer to each activity in android
  • jQuery & CSS - Cut text by height, no truncate
  • Select element inside WebView and get details
  • Javascript get anchor href on click
  • Is storing an OAuth token in cookies bad practise?
  • Dom Node for PHP find href attribute issue
  • How can I encode a filename according to RFC 2231?
  • getElementsByClassName and AJAX
  • Underlying type for Tuple in Swift
  • After converting my FBX file to a .gltf, the model is incredibly small, why?
  • react native create element with string
  • how to remove a div with same ids but display='block' and display='none' in JAVa
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • FileReader+canvas image loading problem
  • Ajax Loaded meta Tags
  • Get one-time binding to work for ng-if
  • Volley JsonObjectRequest send headers in GET Request
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • How to delete a row from a dynamic generate table using jquery?
  • using HTMLImports.whenReady not working in chrome
  • Authorize attributes not working in MVC 4
  • EntityFramework adding new object to nested object collection
  • Easiest way to encapsulate a HTML5 webpage into an android app?