Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 'src' Attribute of iframe
This approach will simply replace the src attribute value of the 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(document.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.
Comparison of Methods
| Method | Advantages | Limitations |
|---|---|---|
| contentWindow.postMessage() | Supports both stop and pause, Better control | Requires enablejsapi=1 parameter |
| Reassigning src attribute | Simple implementation, Works with any iframe | Only stop functionality, Video reloads |
Conclusion
We have learned two different approaches to stopping YouTube videos with JavaScript. The first method using contentWindow.postMessage() is recommended as it provides both stop and pause functionality with better control over the video player.
10K+ Views
