Float YouTube video by viewport intersection.

yt-video-float.js

// Base on https://gist.github.com/realdennis/b254ce2ac0efd54e602a6b1bb64c643a#file-float-youtube-video-using-monkey-js
// Intersection API version
// Last edit: 01/28/2019

(() => {
  const float_video = () => {
    if (window._floatIsOpen === true) return;
    window._floatIsOpen = true;
    const style = document.createElement('style');
    style.innerHTML = `
      .float-video{
        left: unset !important;
        right: 20px !important;
        top: unset !important;
        bottom: 20px !important;
        width: 398px !important;
        height: 224px !important;
        position: fixed !important;
      }
    `;
    document.body.append(style);
    document.querySelector('div#movie_player').style.zIndex = 2;
    const ratio = 0.2;
    const target = document.querySelector('ytd-player');
    const video = document.querySelector('video');
    const options = {
      threshold: ratio,
    };
    const callback = entries => {
      entries.forEach(entry => {
        if (entry.intersectionRatio >= ratio)
          video.classList.remove('float-video');
        else video.classList.add('float-video');
      });
    };
    const observer = new IntersectionObserver(callback, options);
    observer.observe(target);
  };
  if (location.href.includes('watch')) float_video();
  else {
    document.addEventListener('yt-navigate-finish', e => {
      if (e.target.baseURI.includes('watch')) float_video();
    });
  }
})();