Web Development

How to Control a Youtube Video with javascript

Last Tested: 11/21/2020

Sometimes a web developer needs to perform this very important control/monitoring functionality. Whether you need to play a video, see if a video has been watched in its entirety or just integrate the embedded youtube video’s functionality into your code for another reason, it can all be done using the youtube API.

The first important (albeit basic) part of using the Youtube API for these functions is that although the video on your page will look like an embed, you are actually putting an empty div on your page with HTML and the Javascript calls the API and replaces that div with the video you specify.

  1. Put the following in the code of your HTML page:

2. Include a javascript file with the following content (but change videoId to the ID of your video):

3. Include this code in your html page to get the current duration of the video automatically updated:

4. Include this code in your HTML page to add a play button for the video:

5. Include this code in your HTML page to add a pause button for the video:

Disclaimer: I do not work for youtube and so had no involvement whatsoever in the creation of Youtube or it’s excellent API. For more information about using the youtube embed API visit the site listed in my sources for a more in-depth explanation.



Leave a Reply

Your email address will not be published. Required fields are marked *