How can I stop a video with JavaScript in Youtube?

In this tutorial, we will learn to stop a video with JavaScript on YouTube. Using the ‘iframe’ HTML element, we can easily embed the YouTube videos on our application. It is a video player in HTML 5 and has many attributes that users can use according to their needs.

In some cases, it happens that you want to create a custom pause or stop button for the embedded YouTube video. Customized buttons are always pretty rather than default ones, making UI pretty.

So, we will learn two different methods to create the custom stop button for the YouTube videos. However, users can invoke the stopVideo() function when a user loads the web page to stop all videos. There can be various uses, but here we will see it to create the custom buttons.

Using the contentWindow.postMessage() Method

The contentWindow.postMessage() sends a message to the particular element. In our case, we will give the command to stop the YouTube video and invoke the stopVideo() function using this method.

We can either stop or pause the YouTube video using this method. The meaning of stopping the video is that a YouTube video will start from the beginning if the user plays it again. When the user pauses the YouTube video, it will start from where the user has paused it if the user plays it again.

Here, we will create stop and pause buttons separately and add different functionality to both buttons, as we have talked about above.

Syntax

Users can follow the below syntax to use the contentWindow.postMessage() method.

// to stop the YouTube video
Video_element.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');

// To pause the YouTube video
Video_element.contentWindow.postMessage('{"event":"command","func":"PauseVideo","args":""}', '*');

In the above syntax, users can see that we have given command as an event. Also, we are calling the pauseVideo() and stopVideo() functions with Null arguments to make our button function.

Example

In the below example, we have embedded the YouTube video on our web page. Also, we have created the stop and pause buttons. When user will click on any button, it will call the stop() and pause() function according to the button click.

<html>
<head>
<title> Stop Youtube video using JavaScript. </title>
</head>
<style>
   button {
      height: 30px;
      width: 80px;
      background-color: aqua;
   }
</style>
<body>
   <h2> Stop YouTube video using JavaScript. </h2>
   <!-- embedding the YouTube video -->
   <iframe id="videoId" src="https://www.youtube.com/embed/Q4O6yxUC_8g?enablejsapi=1"> </iframe>
   <button onclick = "stop()"> stop </button>
   <button onclick = "pause()"> pause </button>
   <script>
      // to stop the video
      function stop() {
         let video = document.getElementById("videoId")
         video.contentWindow.postMessage( '{"event":"command", "func":"stopVideo", "args":""}', '*');
      }
      // to pause the video
      function pause() {
         let video = document.getElementById("videoId")
         video.contentWindow.postMessage( '{"event":"command", "func":"pauseVideo", "args":""}', '*');
      }
   </script>
</body>
</html>

In the above output, users can test the different functionalities of the stop and pause button.

By reassigning the value of ‘src’ attribute of <iframe>

This approach will simply replace the src attribute value if <iframe> element. When we replace the same video URL, it will start from the beginning and work as the stop functionality.

Syntax

var iframe = document.querySelector( “iframe” );
var temp = iframe.src; 
iframe.src = temp; // re-initializing the src attribute value

Example

In the below example, we have created the stop button.  When the user clicks on the stop button, it will call a JavaScript function called stopVideo(). In the stopVideo() function, we are accessing all <iframe> elements and reinitializing the ‘src’ attribute value to start the YouTube video from first.

<html>
<head>
    <title> Stop YouTube video using JavaScript. </title>
</head>
<style>
   button {
      height: 30px;
      width: 80px;
      background-color: aqua;
   }
</style>
<body>
   <h2> Stop YouTube video using JavaScript. </h2>
   <!-- embedding the YouTube video -->
   <iframe src = "https://www.youtube.com/embed/km8oWHR_m18?enablejsapi=1"> </iframe>
   <button onclick = "stopVideo(body)"> stop </button>
   <script>
      // to stop the video
      function stopVideo(element) {
         // getting every iframe from the body
         var iframes = element.querySelectorAll('iframe');
         // reinitializing the values of the src attribute of every iframe to stop the YouTube video.
         for (let i = 0; i < iframes.length; i++) {
            if (iframes[i] !== null) {
               var temp = iframes[i].src;
               iframes[i].src = temp;
            }
         }
      };
   </script>
</body>
</html>

In the above output, users can see they can stop multiple YouTube videos with a single click.

We have learned two different approaches to stopping the YouTube video. Users can create a separate button for the stop and pause functionality and add a background image to that or style according to the requirements.

Users should use the first approach, as it has the functionality to pause video also.

Updated on: 02-Aug-2022

7K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements