Replay with sound

Video is no longer standalone content to be played with a separate “video player”. Nowadays, videos are commonplace as UI elements. Video contrasts with traditional UI elements (text, tables, images) in a few ways. Video is temporal: its state changes through time. Video is noisy: it can have an audio track. And video is interactive: the user can change its state.

This is a challenge when designing a UI. Say you have a promotional site, and you “upgrade” a promo image by replacing it with a video. There are a couple of naïve ways to do this:

  1. Make the video autoplay on page load and loop forever. The video is like a “gif”. This approach requires no user interaction. However, the user has no control over the video state, which can be annoying.
  2. Make the video play on click and stop when finished. This is how most embedded YouTube videos work. This approach lets the user control the video state. However, the user is required to do more work to see the video.

There is a tradeoff here between requiring interaction and annoying the user. Many modern sites attempt a compromise between these:

This can result in incorrect guesses: the user wants to play the video at a different time, or wanted to listen to the video with audio on. A simple fix is that used by a “Replay with sound” button. This restarts the video and turns up the audio. The button is visible on top of the video when it is muted.

Framer implements this with a YouTube video. Here’s how.

    <div id="player"></div>
    <a id="replay" href="#">Replay with sound</a>
    var replayButton = document.getElementById("replay");
    window.onYouTubeIframeAPIReady = function() {
      var player = new YT.Player(
          videoId: "b0DP6UhlxeI",
          playerVars: { controls: 0, showinfo: 0, modestbranding: 1, rel: 0 },
          events: {
            onReady: function(e) {
              player.setVolume(0); player.seekTo(0); player.playVideo();
      replayButton.onclick = function(e) {
        player.seekTo(0); player.setVolume(100);  player.playVideo();
        e.preventDefault(); return false;
    <script src=""></script>
I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

More by Jim

Tagged . All content copyright James Fisher 2017. This post is not associated with my employer. Found an error? Edit this page.