やあ、現場でコードと格闘している同志諸君。今日もブラウザのレンダリングエンジンと仲良くやっているかな？
ビデオコンテンツがWeb体験の主役になって久しいが、最近のモダンブラウザが標準搭載している「ピクチャーインピクチャー（PiP）」機能、こいつのハンドリングを甘く見ていないだろうか。ユーザーが動画を「ポーン」と画面の隅に飛ばした瞬間、元のページに残されたビデオ要素が「もぬけの殻」になって、レイアウトが間抜けに見えてしまう……なんてのは、プロの仕事としては少し寂しい。
今日は、CSS疑似クラスの中でも比較的新しく、かつ極めて実用的な `:picture-in-picture` について、その裏側の挙動から現場で即使える実装パターンまでを叩き込んでいく。準備はいいか？
—
1. `:picture-in-picture` とは何者か？
結論から言うと、この疑似クラスは「ビデオ要素が現在、ピクチャーインピクチャーモードで表示されている状態」をターゲットにするものだ。
通常、ビデオがPiPに移行すると、ブラウザの内部では「ビデオの描画先」がメインウィンドウから独立した小窓へと切り替わる。このとき、元のDOMツリーに鎮座している`
`:picture-in-picture` を使うことで、「今、この動画は外に出張中です」という状態をCSSだけで検知し、スタイルを出し分けることができる。JavaScriptのイベント（`enterpictureinpicture` / `leavepictureinpicture`）を監視してクラスを付け外しする手間から解放される、実にエレガントな手法なんだ。
—
2. ブラウザの裏側で何が起きているのか
ブラウザのレンダリングプロセスを想像してみてほしい。ビデオ要素がPiPになると、ブラウザはビデオストリームを専用のオーバーレイレイヤーへと転送する。
このとき、CSSの仕様上、`:picture-in-picture` が適用されたビデオ要素には暗黙の制限や特有の挙動が生まれる。
- 描画の空白: 多くのブラウザでは、PiP中のビデオ要素本体は真っ黒（あるいは透明）になる。
- イベントの継続: PiP中でも、元のビデオ要素に対する操作（再生・停止のAPI呼び出しなど）は有効だ。
ここで大事なのは、「PiP中のビデオ要素をそのまま見せておくのは、ユーザーにとって不親切である」という視点だ。ユーザーは「動画がどこへ行ったか」を直感的に理解したい。だからこそ、CSSで「PiP中のプレースホルダー（身代わり）」をデザインする必要がある。
—
3. 実践：現場で使える「PiPプレースホルダー」の実装
では、具体的なコードを見ていこう。
単にビデオに枠をつけるだけじゃ芸がない。PiP中であることを示し、クリックすれば元の場所に戻せるような「気が利く」UIを作ってみよう。
/ ビデオ要素の基本スタイル /
video {
width: 100%;
max-width: 640px;
border-radius: 8px;
transition: all 0.3s ease;
}
/
【ここが心臓部】
ビデオがPiPモードになった時のスタイル定義。
透明度を下げたり、フィルターをかけたりして「アクティブではない」ことを示す。
/
video:picture-in-picture {
opacity: 0.2;
filter: blur(5px);
outline: 2px solid #007bff;
}
/
PiP中だけ表示されるオーバーレイの制御。
隣接セレクタ（+）や兄弟セレクタ（~）を駆使するのがCSS職人の技だ。
/
.pip-overlay {
display: none; / 通常時は隠しておく /
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none; / オーバーレイがクリックを邪魔しないように /
}
/
ビデオがPiP状態の時だけ、メッセージを表示させる。
JSでクラスをトグルする必要なんてない、CSSだけで完結するんだ。
/
video:picture-in-picture + .pip-overlay {
display: block;
}
/ コンテナ側の調整 /
.video-container {
position: relative;
display: inline-block;
}
JS側のトリガー（参考）
PiP自体はユーザーのジェスチャーが必要なので、最低限のJSは必要になる。
async function requestPiP() {
const video = document.getElementById(‘myVideo’);
try {
if (video !== document.pictureInPictureElement) {
await video.requestPictureInPicture();
} else {
await document.exitPictureInPicture();
}
} catch (error) {
console.error(“PiPの起動に失敗しました”, error);
}
}
—
4. 伝説のチーフアーキテクトが教える「運用のツボ」
このプロパティを本番環境で使うなら、以下の3点は必ず意識しておいてほしい。
① Progressive Enhancement（段階的機能向上）の精神
残念ながら、すべてのブラウザが `:picture-in-picture` 疑似クラスを完璧にサポートしているわけではない（特に古いFirefoxなど）。
だが、心配はいらない。CSS疑似クラスは、ブラウザが理解できなければ無視されるだけだ。
「PiP中にリッチな表示になればラッキー、そうでなくても動画は見れる」という、堅牢なフォールバックを前提とした設計にすること。
② `:not()` との組み合わせで無駄を省く
「PiP中ではないときだけホバーエフェクトを出したい」というケースも多いはずだ。その場合はこう書く。
video:not(:picture-in-picture):hover {
transform: scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
これで、動画が小窓に飛んでいるときに、メイン画面の空っぽの枠が不自然に浮き上がるのを防げる。
③ アクセシビリティへの配慮
PiPに移行した際、元のビデオ要素の `controls` がどう見えるかはブラウザの実装に依存する。視覚的に隠す（`opacity: 0` など）場合は、スクリーンリーダーのユーザーが現在の状態（PiPで再生中であること）を把握できるよう、`aria-live` などを用いてアナウンスする工夫をJS側で添えてやると、さらに「デキる」エンジニアだ。
—
終わりに
`:picture-in-picture` 疑似クラスは、一見地味だが、ユーザーがブラウザを自由に使いこなす現代において「体験の連続性」を維持するための強力な武器になる。
「動画が外に出た。じゃあ残された場所はどうあるべきか？」
この問いにCSS一つで答えを出せるようになった君は、また一歩、フロントエンドの深淵へと近づいたはずだ。さあ、今すぐ自分のプロジェクトのビデオコンポーネントに、この「気の利いたコード」を仕込んでみてくれ。
現場からは以上だ。健闘を祈る！
コメント