yukulele · March 29, 2025 10:40 · Mar 18, 2025 · May 20, 2024 · Nov 29, 2023 · Oct 20, 2023
diff --git a/Twitter native video player.md b/Twitter native video player.md
@@ -1,6 +1,6 @@
 # Twitter native video player
 
-Replace the user-unfriendly Twitter video player with the browser's native video player.
+Replace the user-unfriendly Twitter and Blusky video player with the browser's native video player.
 
 This allows you to: 
 * seek backward/forward with the <kbd title="left">←</kbd> / <kbd title="right">→</kbd> keys

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -5,9 +5,10 @@
 // @match       https://mobile.twitter.com/*
 // @match       https://x.com/*
 // @match       https://mobile.x.com/*
+// @match       https://bsky.app/*
 // @grant       GM.getValue
 // @grant       GM.setValue
-// @version     1.0.11
+// @version     1.1.11
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.
@@ -26,7 +27,10 @@ async function nativePlayer(video) {
   video.addEventListener('mouseenter', () => showControls(video))
   video.addEventListener('mouseleave', () => hideControls(video))
   video.addEventListener('keydown', e => keyboard(e, video))
+  video.style.position = 'relative'
   video.style.zIndex = 1
+  video.muted = false
+  showControls(video)
   video.focus()
 }
 
@@ -56,6 +60,7 @@ new MutationObserver(mutationsList => {
   for (var mutation of mutationsList) {
     if (mutation.type !== 'childList') continue
     for (const node of mutation.addedNodes) {
+      if (node instanceof HTMLVideoElement) return void nativePlayer(node)
       if (!(node instanceof HTMLElement)) continue
       for (const video of node.querySelectorAll('video')) nativePlayer(video)
     }

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -3,9 +3,11 @@
 // @namespace   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @match       https://twitter.com/*
 // @match       https://mobile.twitter.com/*
+// @match       https://x.com/*
+// @match       https://mobile.x.com/*
 // @grant       GM.getValue
 // @grant       GM.setValue
-// @version     1.0.10
+// @version     1.0.11
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -5,7 +5,7 @@
 // @match       https://mobile.twitter.com/*
 // @grant       GM.getValue
 // @grant       GM.setValue
-// @version     1.0.9
+// @version     1.0.10
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.
@@ -43,7 +43,7 @@ function toggleFullscreen(video) {
   video.requestFullscreen()
 }
 
-function keyboard(key, video) {
+function keyboard(e, video) {
   if (e.key === 'f') return toggleFullscreen(video)
   if (e.key === '0' || e.code === 'Numpad0') return video.playbackRate = 1
   if (e.key === '+') return video.playbackRate += 0.05

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -5,7 +5,7 @@
 // @match       https://mobile.twitter.com/*
 // @grant       GM.getValue
 // @grant       GM.setValue
-// @version     1.0.8
+// @version     1.0.9
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.
@@ -23,7 +23,7 @@ async function nativePlayer(video) {
   video.addEventListener('ratechange', () => GM.setValue('playbackRate', video.playbackRate))
   video.addEventListener('mouseenter', () => showControls(video))
   video.addEventListener('mouseleave', () => hideControls(video))
-  video.addEventListener('keydown', e => keyboard(e.key, video))
+  video.addEventListener('keydown', e => keyboard(e, video))
   video.style.zIndex = 1
   video.focus()
 }
@@ -44,10 +44,10 @@ function toggleFullscreen(video) {
 }
 
 function keyboard(key, video) {
-  if (key === 'f') return toggleFullscreen(video)
-  if (key === '0') return video.playbackRate = 1
-  if (key === '+') return video.playbackRate += 0.05
-  if (key === '-') return video.playbackRate -= 0.05
+  if (e.key === 'f') return toggleFullscreen(video)
+  if (e.key === '0' || e.code === 'Numpad0') return video.playbackRate = 1
+  if (e.key === '+') return video.playbackRate += 0.05
+  if (e.key === '-') return video.playbackRate -= 0.05
 }
 
 new MutationObserver(mutationsList => {

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -3,8 +3,9 @@
 // @namespace   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @match       https://twitter.com/*
 // @match       https://mobile.twitter.com/*
-// @grant       none
-// @version     1.0.7
+// @grant       GM.getValue
+// @grant       GM.setValue
+// @version     1.0.8
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.
@@ -15,16 +16,28 @@
 // @inject-into auto
 // ==/UserScript==
 
-function nativePlayer(video) {
-  video.playbackRate = localStorage.playbackRate || 1
-  video.addEventListener('ratechange', () => localStorage.playbackRate = video.playbackRate)
-  video.addEventListener('mouseenter', () => video.controls = true)
-  video.addEventListener('mouseleave', () => video.controls = false)
+let timeout
+
+async function nativePlayer(video) {
+  video.playbackRate = await GM.getValue('playbackRate') ?? 1
+  video.addEventListener('ratechange', () => GM.setValue('playbackRate', video.playbackRate))
+  video.addEventListener('mouseenter', () => showControls(video))
+  video.addEventListener('mouseleave', () => hideControls(video))
   video.addEventListener('keydown', e => keyboard(e.key, video))
   video.style.zIndex = 1
   video.focus()
 }
 
+function showControls(video) {
+  clearTimeout(timeout)
+  video.controls = true
+}
+
+function hideControls(video) {
+  clearTimeout(timeout)
+  timeout = setTimeout(() => video.controls = false, 1000)
+}
+
 function toggleFullscreen(video) {
   if (document.fullscreenElement) return document.exitFullscreen()
   video.requestFullscreen()

diff --git a/twitter-native-video-player-icon.svg b/twitter-native-video-player-icon.svg
diff --git a/twitter-native-video-player-icon.svg b/twitter-native-video-player-icon.svg
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -4,7 +4,7 @@
 // @match       https://twitter.com/*
 // @match       https://mobile.twitter.com/*
 // @grant       none
-// @version     1.0.6
+// @version     1.0.7
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.

diff --git a/twitter-native-video-player-icon.svg b/twitter-native-video-player-icon.svg
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -4,7 +4,7 @@
 // @match       https://twitter.com/*
 // @match       https://mobile.twitter.com/*
 // @grant       none
-// @version     1.0.5
+// @version     1.0.6
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.

diff --git a/twitter-native-video-player-icon.svg b/twitter-native-video-player-icon.svg
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -4,10 +4,11 @@
 // @match       https://twitter.com/*
 // @match       https://mobile.twitter.com/*
 // @grant       none
-// @version     1.0.4
+// @version     1.0.5
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.
+// @icon        https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player-icon.svg
 // @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @supportURL  https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments

diff --git a/Twitter native video player.md b/Twitter native video player.md
@@ -3,11 +3,11 @@
 Replace the user-unfriendly Twitter video player with the browser's native video player.
 
 This allows you to: 
-* seek with <kbd title="left">←</kbd>/<kbd title="right">→</kbd> keys
-* change the volume with the <kbd title="top">↑</kbd>/<kbd title="bottom">↓</kbd> keys
-* Switch full screen with double-click or <kbd>f</kbd> key
+* seek backward/forward with the <kbd title="left">←</kbd> / <kbd title="right">→</kbd> keys
+* change the volume with the <kbd title="top">↑</kbd> / <kbd title="bottom">↓</kbd> keys
+* switch full screen with double-click or <kbd>f</kbd> key
 * access the video's contextual menu
-* change the playback speed (via the contextual menu)
+* change the playback speed with the <kbd>+</kbd> / <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu
 * share the playback speed between videos
 
 install: https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -4,42 +4,47 @@
 // @match       https://twitter.com/*
 // @match       https://mobile.twitter.com/*
 // @grant       none
-// @version     1.0.3
+// @version     1.0.4
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
-// @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek with left/right keyboard keys, change the volume with the up/down keyboard keys, Switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed (via the contextual menu), share the playback speed between videos.
+// @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek backward/forward with the left/right keyboard keys, change the volume with the up/down keyboard keys, switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed with the <kbd>+</kbd>, <kbd>-</kbd> and <kbd>0</kbd> keys or via the contextual menu, share the playback speed between videos.
 // @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @supportURL  https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments
 // @inject-into auto
 // ==/UserScript==
 
 function nativePlayer(video) {
-  video.playbackRate = window.localStorage.playbackRate || 1
-  video.addEventListener('ratechange', () => window.localStorage.playbackRate = video.playbackRate)
+  video.playbackRate = localStorage.playbackRate || 1
+  video.addEventListener('ratechange', () => localStorage.playbackRate = video.playbackRate)
   video.addEventListener('mouseenter', () => video.controls = true)
   video.addEventListener('mouseleave', () => video.controls = false)
-  video.addEventListener('keydown', e => e.key === 'f' && toggleFullscreen(video))
+  video.addEventListener('keydown', e => keyboard(e.key, video))
   video.style.zIndex = 1
   video.focus()
 }
 
 function toggleFullscreen(video) {
-  if(document.fullscreenElement) return document.exitFullscreen()
+  if (document.fullscreenElement) return document.exitFullscreen()
   video.requestFullscreen()
 }
 
-const mutationObserver = new MutationObserver(mutationsList => {
+function keyboard(key, video) {
+  if (key === 'f') return toggleFullscreen(video)
+  if (key === '0') return video.playbackRate = 1
+  if (key === '+') return video.playbackRate += 0.05
+  if (key === '-') return video.playbackRate -= 0.05
+}
+
+new MutationObserver(mutationsList => {
   for (var mutation of mutationsList) {
     if (mutation.type !== 'childList') continue
     for (const node of mutation.addedNodes) {
       if (!(node instanceof HTMLElement)) continue
       for (const video of node.querySelectorAll('video')) nativePlayer(video)
     }
   }
-})
-
-mutationObserver.observe(document.documentElement, {
+}).observe(document.documentElement, {
   childList: true,
   subtree: true,
 })
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -4,7 +4,7 @@
 // @match       https://twitter.com/*
 // @match       https://mobile.twitter.com/*
 // @grant       none
-// @version     1.0.2
+// @version     1.0.3
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek with left/right keyboard keys, change the volume with the up/down keyboard keys, Switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed (via the contextual menu), share the playback speed between videos.

diff --git a/Twitter native video player.md b/Twitter native video player.md
@@ -1,11 +1,11 @@
 # Twitter native video player
 
-Replace the user-unfriendly Twitter reader with the browser's native reader.
+Replace the user-unfriendly Twitter video player with the browser's native video player.
 
 This allows you to: 
-* move the player with the left/right keyboard keys 
-* change the volume with the up/down keyboard keys
-* Switch to full screen with double-click
+* seek with <kbd title="left">←</kbd>/<kbd title="right">→</kbd> keys
+* change the volume with the <kbd title="top">↑</kbd>/<kbd title="bottom">↓</kbd> keys
+* Switch full screen with double-click or <kbd>f</kbd> key
 * access the video's contextual menu
 * change the playback speed (via the contextual menu)
 * share the playback speed between videos

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -7,7 +7,7 @@
 // @version     1.0.2
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
-// @description Replace the user-unfriendly Twitter reader with the browser's native reader. This allows you to: move the player with the left/right keyboard keys , change the volume with the up/down keyboard keys, Switch to full screen with double-click, access the video's contextual menu, change the playback speed (via the contextual menu), share the playback speed between videos
+// @description Replace the user-unfriendly Twitter video player with the browser's native video player. This allows you to: seek with left/right keyboard keys, change the volume with the up/down keyboard keys, Switch to full screen with double-click of f key, access the video's contextual menu, change the playback speed (via the contextual menu), share the playback speed between videos.
 // @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @supportURL  https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments
@@ -19,20 +19,27 @@ function nativePlayer(video) {
   video.addEventListener('ratechange', () => window.localStorage.playbackRate = video.playbackRate)
   video.addEventListener('mouseenter', () => video.controls = true)
   video.addEventListener('mouseleave', () => video.controls = false)
+  video.addEventListener('keydown', e => e.key === 'f' && toggleFullscreen(video))
   video.style.zIndex = 1
+  video.focus()
+}
+
+function toggleFullscreen(video) {
+  if(document.fullscreenElement) return document.exitFullscreen()
+  video.requestFullscreen()
 }
 
 const mutationObserver = new MutationObserver(mutationsList => {
   for (var mutation of mutationsList) {
-    if (mutation.type !== 'childList') return
+    if (mutation.type !== 'childList') continue
     for (const node of mutation.addedNodes) {
       if (!(node instanceof HTMLElement)) continue
       for (const video of node.querySelectorAll('video')) nativePlayer(video)
     }
   }
 })
 
-mutationObserver.observe(document.documentElement, { 
-  childList: true, 
+mutationObserver.observe(document.documentElement, {
+  childList: true,
   subtree: true,
- })
+})
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -2,8 +2,9 @@
 // @name        Twitter native video player
 // @namespace   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @match       https://twitter.com/*
+// @match       https://mobile.twitter.com/*
 // @grant       none
-// @version     1.0.1
+// @version     1.0.2
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace the user-unfriendly Twitter reader with the browser's native reader. This allows you to: move the player with the left/right keyboard keys , change the volume with the up/down keyboard keys, Switch to full screen with double-click, access the video's contextual menu, change the playback speed (via the contextual menu), share the playback speed between videos

diff --git a/Twitter native video player.md b/Twitter native video player.md
@@ -1,13 +1,13 @@
 # Twitter native video player
 
-Replace not user-friendly Twitter player with native browser player.
+Replace the user-unfriendly Twitter reader with the browser's native reader.
 
-This allow to: 
-  * seek with left/right keyboard keys 
-  * change volume with up/down keyboard keys
-  * toggle fullscreen with double-click
-  * access to video context menu
-  * change playback rate (via context menu)
-  * share playback rate between videos
+This allows you to: 
+* move the player with the left/right keyboard keys 
+* change the volume with the up/down keyboard keys
+* Switch to full screen with double-click
+* access the video's contextual menu
+* change the playback speed (via the contextual menu)
+* share the playback speed between videos
 
 install: https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -6,7 +6,7 @@
 // @version     1.0.1
 // @author      yukulele
 // @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
-// @description Replace not user-friendly twitter player with native browser player. This allow to: seek with left/right keyboard keys change volume with up/down keyboard keys, fullscreen with double-click, change playback rate (via context menu), share playback rate between videos.
+// @description Replace the user-unfriendly Twitter reader with the browser's native reader. This allows you to: move the player with the left/right keyboard keys , change the volume with the up/down keyboard keys, Switch to full screen with double-click, access the video's contextual menu, change the playback speed (via the contextual menu), share the playback speed between videos
 // @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @supportURL  https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -3,8 +3,9 @@
 // @namespace   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @match       https://twitter.com/*
 // @grant       none
-// @version     1.0
+// @version     1.0.1
 // @author      yukulele
+// @homepage    https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @description Replace not user-friendly twitter player with native browser player. This allow to: seek with left/right keyboard keys change volume with up/down keyboard keys, fullscreen with double-click, change playback rate (via context menu), share playback rate between videos.
 // @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js

diff --git a/Twitter native video player.md b/Twitter native video player.md
@@ -1,6 +1,6 @@
 # Twitter native video player
 
-Replace not user-friendly Twitter :twitter: player with native browser player.
+Replace not user-friendly Twitter player with native browser player.
 
 This allow to: 
   * seek with left/right keyboard keys 

diff --git a/Twitter native video player.md b/Twitter native video player.md
@@ -1,11 +1,13 @@
 # Twitter native video player
 
-Replace not user-friendly twitter player with native browser player.
+Replace not user-friendly Twitter :twitter: player with native browser player.
 
 This allow to: 
-  * seek with left/right keyboard keys change volume with up/down keyboard keys
-  * fullscreen with double-click
+  * seek with left/right keyboard keys 
+  * change volume with up/down keyboard keys
+  * toggle fullscreen with double-click
+  * access to video context menu
   * change playback rate (via context menu)
-  * share playback rate between videos.
+  * share playback rate between videos
 
 install: https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
diff --git a/README.md → Twitter native video player.md b/README.md → Twitter native video player.md
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# twitter native video player
+# Twitter native video player
 
-replace not user-friendly twitter player with native browser player.
+Replace not user-friendly twitter player with native browser player.
 
 This allow to: 
   * seek with left/right keyboard keys change volume with up/down keyboard keys

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -1,11 +1,11 @@
 // ==UserScript==
-// @name        twitter native video player
+// @name        Twitter native video player
 // @namespace   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @match       https://twitter.com/*
 // @grant       none
 // @version     1.0
 // @author      yukulele
-// @description replace not user-friendly twitter player with native browser player. This allow to: seek with left/right keyboard keys change volume with up/down keyboard keys, fullscreen with double-click, change playback rate (via context menu), share playback rate between videos.
+// @description Replace not user-friendly twitter player with native browser player. This allow to: seek with left/right keyboard keys change volume with up/down keyboard keys, fullscreen with double-click, change playback rate (via context menu), share playback rate between videos.
 // @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
 // @supportURL  https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments

diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# twitter native video player
+
+replace not user-friendly twitter player with native browser player.
+
+This allow to: 
+  * seek with left/right keyboard keys change volume with up/down keyboard keys
+  * fullscreen with double-click
+  * change playback rate (via context menu)
+  * share playback rate between videos.
+
+install: https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -1,10 +1,14 @@
 // ==UserScript==
 // @name        twitter native video player
+// @namespace   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a
 // @match       https://twitter.com/*
 // @grant       none
 // @version     1.0
 // @author      yukulele
 // @description replace not user-friendly twitter player with native browser player. This allow to: seek with left/right keyboard keys change volume with up/down keyboard keys, fullscreen with double-click, change playback rate (via context menu), share playback rate between videos.
+// @downloadURL https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
+// @updateURL   https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a/raw/twitter-native-video-player.user.js
+// @supportURL  https://gist.github.com/yukulele/805c382f371852e8f25efd7b2ec5876a#comments
 // @inject-into auto
 // ==/UserScript==
 

diff --git a/twitter-native-video-player.user.js b/twitter-native-video-player.user.js
@@ -0,0 +1,32 @@
+// ==UserScript==
+// @name        twitter native video player
+// @match       https://twitter.com/*
+// @grant       none
+// @version     1.0
+// @author      yukulele
+// @description replace not user-friendly twitter player with native browser player. This allow to: seek with left/right keyboard keys change volume with up/down keyboard keys, fullscreen with double-click, change playback rate (via context menu), share playback rate between videos.
+// @inject-into auto
+// ==/UserScript==
+
+function nativePlayer(video) {
+  video.playbackRate = window.localStorage.playbackRate || 1
+  video.addEventListener('ratechange', () => window.localStorage.playbackRate = video.playbackRate)
+  video.addEventListener('mouseenter', () => video.controls = true)
+  video.addEventListener('mouseleave', () => video.controls = false)
+  video.style.zIndex = 1
+}
+
+const mutationObserver = new MutationObserver(mutationsList => {
+  for (var mutation of mutationsList) {
+    if (mutation.type !== 'childList') return
+    for (const node of mutation.addedNodes) {
+      if (!(node instanceof HTMLElement)) continue
+      for (const video of node.querySelectorAll('video')) nativePlayer(video)
+    }
+  }
+})
+
+mutationObserver.observe(document.documentElement, { 
+  childList: true, 
+  subtree: true,
+ })