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 <hi@pepelsbey.dev> --------- Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
mdn · Mar 11, 2024 · 69c077f · 69c077f
1 parent 9edd962
commit 69c077f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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