JSFiddle - React, Tailwind, and code Playground

HTML

<h1> Auto Pause Video Bookmarklet </h1>
<a href="javascript:(function ($) {var playing;var video = $('video')[0]; $(window).blur(function(){playing = !video.paused;video.pause();}).focus(function(){if (playing) {video.play();}})})(jQuery)" class="bookmarklet">
    Auto-Pause
</a>

<strong> &lt;-- Drag the link to your bookmarks bar</strong>

CSS

body {
   font-family: sans-serif;   
}
a.bookmarklet {
  background: #CCC;
  padding: 5px 10px;  
  color: #000;
  border: solid 1px #000;
  border-radius: 3px;
}

JavaScript

// This is the uncompressed code used in the bookmarklet
// This is just for demonstration, the real code is in the html

(function ($) {
    // Store whether the video is playing on blur
    var playing;   
    // Grab the first <video> element
    var video = $('video')[0]; 
    
    // Listen for the windows focus and blur events
    $(window).blur(function () {
        // When bluring, remember if video was playing, then pause
        playing = !video.paused;
        video.pause();
    }).focus(function () { 
        // When focusing, if the video was playing on blur, continue playing
        if (playing) {
            video.play();
        }
    })
})(jQuery) // Alias jQuery to $ in our wrapper function.