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

By:
Karr Fager
Published:
October 5, 2020
Updated:
October 5, 2020
Share

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:

See the Pen BazBwGO by Digital Red Panther (@digitalredpanther) on CodePen.

The only pieces you need to update are:

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

YouTube Video 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:

See the Pen play, pause, stop youtube embed by Digital Red Panther (@digitalredpanther) on CodePen.

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!

About the Author:
Karr Fager
Karr is the owner and digital marketer of Digital Red Panther, providing sleek online marketing services for small business.
Share
Keep Learning About Web Design + SEO