Web

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

投稿日:2019年4月15日 更新日:

1. Chrome の「ピクチャー イン ピクチャー」機能

Chrome には「ピクチャー イン ピクチャー」という機能があり、YouTube の動画プレイヤーを Chrome のウィンドウから分離させることができます。英語で書くと Picture-in-Picture ですが、略して PiP とも書くこともあるようです。

何か他の作業をしながら、動画も表示しておきたい場合にとても便利な機能です。

※ これはあくまで Chrome の機能なので、YouTube 以外でもこの機能に対応することは可能です。

動画プレーヤー部分を分離して常に最前面に表示します
動画プレーヤー部分を分離して常に最前面に表示します

2. ピクチャー イン ピクチャーを行う方法

ピクチャー イン ピクチャー機能を使う方法は簡単で、

  1. 動画にマウスポインタを持っていき、右ボタンダブルクリックする。
  2. 表示されたメニューの中にある [ピクチャー イン ピクチャー] を選択する。

これだけです。

マウスの右ボタンをダブルクリックというのは、あまりやらない操作なので最初は違和感があるかもしれません。

3. プレイヤーの操作など

プレイヤーの操作などについて説明します。

  • 分離されたプレイヤーは常に最前面に表示されます。
  • Chrome 内の元のタブには、「ピクチャー イン ピクチャーが適用されている」ことを示すアイコンが表示されます。
  • プレイヤーの枠部分をドラッグすることで、サイズを調整することができます。もちろん移動もできます。
  • プレイヤー上からは、「再生 / 一時停止」「タブに戻る」「閉じる」などの操作ができるようになっています。

3. おわりに

すごく便利だと思うのですが、マウスの右ボタンをダブルクリックというのは、いつか変更されるのでしょうか。もう少し普通に開始できるとよいのですが。

また、最新版の Android版 Chrome でも、既に対応しているようです。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web

ウェブブラウザがページを取得して表示するまでの流れ

目次1. はじめに2. Chrome デベロッパーツールの [Network]パネル3. リソース毎の処理の流れ4. その後の流れ5. DOMContentLoaded と load イベント6. グ …

Web

Googleの「広告に関する問題レポート」を使ってWebサイトの広告に問題がないかチェックする

目次1. 2019年7月9日から、Chromeブラウザの広告ブロック機能が有効になります2. 「広告に関する問題レポート」の使い方(1) ブラウザで「広告に関する問題レポート」ページにアクセスします。 …

Web

Webフォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる

目次1. Webフォントの読み込みと font-display 記述子(概要)2. font-display 記述子を使ってテキストをすぐに表示させる方法3. font-display 記述子の詳しい …

Chrome

Chrome 77 デベロッパーツールの新機能

目次1. はじめに2. 主な新機能要素のスタイルをコピーするレイアウトシフト (layouts shifts) を表示する使い方Audits パネルの Lighthouse 5.1[Performan …

WebAssembly を試してみた

2018年10月における WebAssembly の状況を記録するために、現時点での WebAssembly を試してみることにしました。 目次1. WebAssembly とは?WebAssembl …