手把手教你撰寫一個 Youtube 影片懸浮外掛
當使用者觀看評論時、影片不在使用者視線內，影片將會自動懸浮至畫面右下角的腳本，讓我們透過一點點 JavaScript 以及 CSS 來完成這個任務。
3 min readJan 19, 2019
除了 YouTube 以外，許多擁有影片的社群網站皆擁有這個功能，舉凡 Facebook 、 bilibili ，都會在使用者滾動後，將影片懸浮至角落。這次我們就使用 JavaScript 幫 YouTube 把這個好用的功能加回去吧！
直接來看看 Demo
完整程式碼如下
接著來講解一下這段程式碼到底做了什麼。
教學文如下
1. 定義新的 CSS rule
我們需要一個新的 CSS rule ，在不同情況透過把 Element 的 class 抽換，原因是我們不希望影響到原始頁面的 CSS （inline-css）。這邊我透過添加一個新的 style 標籤，把對應的規則設定好。
2. 自幹debounce
因為監聽滾動事件，我希望能讓 callback 能夠在一定頻率內只執行一次，所以透過觀察計時器是否存在，自幹了一個 debounce 。
3. 觀察是否在使用者視線內
這邊使用最懶人的方式，透過getBoundingClientRect 的方法，取得該元素的各項 offset ，由於YouTube影片皆是在最上方，所以當影片的 container 之bottom為負值時，代表影片已經不再使用者視線範圍內。
這時我們把剛剛定義好的 CSS rule 給 append 進去。
反之，當在視線內時則把該 class 給 replace 掉。
4. 將監聽器掛在 scroll 事件並且 debounce
沒什麼好說的…記得 debounce 一波，不然使用者會難受想哭。
大功告成！
另外一些小細節補充
- 2.3 行做防禦性編程，避免重複掛載事件。
- 17 行原因是該元素的
z-index會影響<video>是否被其他元素蓋住 - 32 行除了調整成大於0以外，也可以調整成 > header 的高度 (56之類的)
使用方式
可以使用 Bookmarklet 或是 Userscript 的方式，推薦後者。
Bookemarklet
- 將代碼加入書籤連結並以
javascript:做開頭，並將腳本加入後頭。 - 將來想使用時點擊即可加載腳本。
Userscript (使用 tampermonkey)
- 將代碼設定好配對的 URL ，每次自動加載。
補充：如果用tampermonkey的話建議使用這個完整腳本
