Introduction
對於 picture-in-picture 帶來的效果，相信大家都不陌生。它豐富了 video 的瀏覽體驗，讓 video:picture-picture 可以跨 tab 於最上層顯示，對於影片或是會議進行都能多工進行～
不過很可惜的該 Web API僅僅支援 <video />，也就是說 developers 客製化的 control panel 或是其他附加功能均無法直接在 picture-in-picture window 中搬移過去，可謂是最大的遺憾～
也因為該功能的限縮，間接觸成了 Document Picture-in-Picture 的誕生，這個 Web API 讓任何 HTML element 都可以直接進入 picture-in-picture 的模式，以 YouTube 來說，便可以將整個 YT player 直接進入 picture-in-picture 模式，更繼承與保留了原來的操作體驗，讓 picture-in-picture 中的 player 更加完善。
對這個 Web API 有興趣的朋友，不妨點擊上方技術文件，一覽如何實作？筆者非常喜愛這項功能亦將之包裝成 Web component — <msc-any-pip />，方便快速導入到服務當中。
今天要跟大家分享使用 Document Picture-in-Picture 幾個容易被忽略的要點，讓大夥兒們可以無礙愉悅的來使用它。
1. 最佳化 CSS 樣式呈現
隨著 CSS Nesting 技術補及，相信越來越多的朋友開始導入 CSS Nesting，並且依照 module 來巢狀封裝樣式。
不過實際上 Document Picture-in-Picture 的實作基本上是把 target element 黏貼到另一個 document.body 下，所以當僅針對 [class=my-document-pip-target] 進行 Document Picture-in-Picture 化，就有機會造成樣式丟失（範例的中的 button 以及 progress 的屬性都是有相依性，一但單獨抽離就有出現不預期的樣式錯誤）。
所以最佳作法就是把當前的所有 CSS 都 clone 一份並黏貼到 Picture-in-Picture Window （以下簡寫為 pip window）中的 document 中，inline style 中的 style clone 亦需要注意斷行符號的保留，避免樣式 parsing 錯誤。
此外，我們也可以藉由這樣的特性來客製化 pip window 裡頭的樣式。
2. 保留元件當前狀態
靜態的資料如圖片、文字的描述原件可以無礙的直接黏貼到 pip window，但如果是動態內容，比方說播放中的 <video />、<audio /> ，倒數計時、完成度等資訊呈現，carousel 當前輪播頁碼 … etc。就需要特別注意於不同 document 間的往返要讓他們狀態維持一致，如此才能維持既有的瀏覽體驗避免造成使用者徬徨、錯愕。
3. 無法呼叫 Fullscreen
Document Picture-in-Picture 會把 pip window 中的 element.requestFullscreen disable，也就是說於 pip window 中的原件事無法直接轉換成 fullscreen 模式。所以在 JavaScript 的撰寫上最好用 try / catch 針對 requestFullscreen 進行包覆，避免污染了 thread process。
Conclusion
以上便是幾個操作 Document Picture-in-Picture 需要注意的幾個小技巧，希望這些實作經驗可以有效地幫助到大家，讓大夥們可以更輕易的入門 Document Picture-in-Picture。
感謝大家的閱讀，希望本篇能確切的幫助到大家～ #picture-in-picture