Learn more about Russian war crimes in Ukraine.

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 framer.com: 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="https://www.youtube.com/iframe_api"></script>

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

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