From 69c077feb651ff465bee3ca3f822197f53ca81a7 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 11 Mar 2024 17:32:26 +0000 Subject: [PATCH] add display-mode: picture-in-picture example and fix sizing issue (#263) * add display-mode: picture-in-picture example and fix sizing issue * Update document-picture-in-picture/main.css Co-authored-by: Vadim Makeev --------- Co-authored-by: Vadim Makeev --- document-picture-in-picture/main.css | 16 ++++++++++++++++ document-picture-in-picture/main.js | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/document-picture-in-picture/main.css b/document-picture-in-picture/main.css index 06f31119..2920b44a 100644 --- a/document-picture-in-picture/main.css +++ b/document-picture-in-picture/main.css @@ -11,3 +11,19 @@ #in-pip-message { display: none; } + +@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) { + body { + background: antiquewhite; + } +} + +@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) { + body { + background: #333; + } + + a { + color: antiquewhite; + } +} diff --git a/document-picture-in-picture/main.js b/document-picture-in-picture/main.js index 512e958a..d0b8635a 100644 --- a/document-picture-in-picture/main.js +++ b/document-picture-in-picture/main.js @@ -22,7 +22,7 @@ async function togglePictureInPicture() { // Open a Picture-in-Picture window. const pipWindow = await window.documentPictureInPicture.requestWindow({ width: videoPlayer.clientWidth, - height: videoPlayer.clientHeight, + height: videoPlayer.clientHeight + 50, }); // Add pagehide listener to handle the case of the pip window being closed using the browser X button