← Back

How to create a dashboard with a YouTube Livestream, Timer, and Agenda

· Lukas Hermann Lukas Hermann

You want to create a dashboard with a timer and a YouTube live stream? Sounds like a difficult problem? It’s not! It’s super easy!

I’ll show you how to create the complete dashboard in HTML (with easy copy-paste, no experience required) and how to put it on the internet for free with one click.

This is the end result we want to accomplish:

Dashboard with timer, agenda, and YouTube livestream
Dashboard with timer, agenda, and YouTube live stream

A dashboard with a timer and live stream preview is useful for keeping track of time and seeing what is happening in the live stream at the same time. This is not only useful as feedback for a video producer but can also serve as digital signage for an event venue, especially with the agenda showing the current progress of the event.

Create a Timer and Agenda Page for Free

  1. Create a timer for yourself with Stagetimer. It’s free and you don’t even need to create an account —> Create a new timer

  2. Then copy the “Viewer” and “Agenda” links, we need them in the next step:

Copy the viewer and agenda links
Copy the viewer and agenda links

Create a “dashboard.html” File
(Easy Copy-Paste)

  1. Use any text editor to create a new file and save it as “dashboard.html” in your project folder. (Tip: use Notepad (Win) or TextEdit (Mac), Microsoft Word won’t work)

  2. Add the following code to the “dashboard.html” file:

<!DOCTYPE html>
<html lang="en" >
  <meta charset="UTF-8">
  <title>Timer Dashboard</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css'>
<body translate="no">
  <main class="grid grid-cols-2 grid-rows-2 h-screen w-screen bg-black">
    <div class="border-2 border-black">
      <!-- Timer Frame -->
        class="w-full h-full"
    <div class="row-span-2 border-2 border-black">
      <!-- Agenda Frame -->
        class="w-full h-full"
    <div class="border-2 border-black">
      <!-- YouTube Frame -->
        class="w-full h-full"
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

(Or download the file here: https://stagetimer.io/assets/articles/dashboard.html.zip)

  1. Replace the URL for the timer with the “Viewer” URL you copied before: src="https://stagetimer.io/r/6PAH8ZNA/"

  2. Replace the URL for the agenda with the “Agenda” URL you copied: src="https://stagetimer.io/r/6PAH8ZNA/agenda/"

  3. Change the YouTube link with your own video ID src="https://www.youtube.com/embed/<YOUR_VIDEO_ID>?controls=0&autoplay=1". (tip: autoplay=1 starts the playback as soon as the page is loaded)

  4. Save the “dashboard.html” file and open it in your web browser.

(Here’s a working example: https://codepen.io/lhermann/pen/RwMYPdj)

Make it Live on the Internet

We’ll use a simple one-click hoster to get the dashboard on the internet.

  1. Go to https://tiiny.host

  2. Drag & Drop the dashboard.html file into the website:

Host the dashboard with one click
Host the dashboard with one click
  1. Verify your email address with tiiny.host to activate the website

  2. Now you have a link to your dashboard you can share with others that looks something like this: https://stagetimer-dashboard.tiiny.site/.


If you know a bit of HTML then it’s very easy to tweak the dashboard to your own requirements.

Enjoy 😃