Flipping YouTube videos

My wife loves to knit and uses YouTube to find new stitches and techniques for whatever she’s knitting next. However, she’s also left-handed and finds mentally mirroring the techniques to be a challenge, so asked if there’s a way to mirror the videos so they look like left-handed techniques!

Never wanting to disappoint, my first idea was use a filter in VLC Media Player, but at the time, there were issues in VLC loading YouTube URLs, required a wrapper around VLC and meant copying URLs from her browser to the media player. Not a great process, and needed to be easy.

I’m sure there is a great browser extension out there that can do it, but I’m not a big fan of installing random browser extensions that might be doing more than advertised. I’m not going to recommend something I wouldn’t use myself.

I played around in the browser dev tools with adding CSS filter to a YouTube video and what do you know, it worked! So all I needed to do is modify the style of the video element on the YouTube page, which can be down using a bookmarklet: a bookmark that executes some javascript on the current page.

The magic

Here is the code.

1
2
3
4
5
6
7
javascript: ( () => {
  Array.from(document.getElementsByTagName("video")).forEach(
    vid => {
      vid.style.cssText += "transform: scale(-1, 1); filter: FlipH;"
    }
  )
})();

To make life easier, here is a link that you can drag to your bookmarks that will do it for you. You can also right-click and select Bookmark Link in Firefox.

Caveats

My wife was ecstatic with such an easy to use solution, however there are caveats:

• Going to fullscreen or cinema mode stops the mirroring, however clicking the bookmark again once in cinema mode will reverse it again.
• Clicking the bookmark a second time does not mirror the mirror, to remove the mirroring, it’s easiest to just refresh the page or go fullscreen and back again.