Make Play, Pause, and Stop Buttons for Your Embedded YouTube Video

I'm going to show you how to make buttons that play, pause, and stop your embedded YouTube videos on your website.

‍

‍

These are completely customizable video control buttons for embedded YouTube videos.

‍

There are 3 steps:

‍

1. Add your embedded YouTube video
2. Make your buttons
3. Add code that triggers on button click

‍

1. Add Your Embedded YouTube Video

‍

First, add an custom embed block.

‍

Then, add this code into the embed block:

‍

‍

The only pieces you need to update are:

‍

• The height and width if you desire
• The YouTube URL ID

‍

2. Make Your Buttons

‍

Second, we need to make our play, pause, and stop videos that will trigger the video.

‍

There are numerous ways you can go about doing this.

‍

I'll give you a few options.

‍

• Add text link
• Add a link block with an image inside of it
• Add a link block with text inside it

‍

The important part of this is the classes of the buttons. The classes will trigger the video controls.

‍

Here are the three classes you need:

‍

• "play-video" for the play button
• "pause-video" for the pause button
• "stop-video" for the pause button

‍

That's it for step two.

‍

3. Add Code That Triggers on Button Click

‍

Simply add an embed code block or go to the backend where you can inject Javascript, and then add this code:

‍

‍

You do not need to change anything, it should be good to go.

‍

Test it out, and if anything is not working, let me know below!