はじめに みなさんは、ピクチャーインピクチャーをご存じですか? 動画やビデオ通話系のサービスやアプリではよくみますが、他の用途ではあまりみませんよね! それもそのはずで、今までのピクチャーインピクチャーは、<video> 要素でのみ使うことができました。 ですが、Chrome 111 以降では、documentPictureInPictureを使うことで、<video> 要素以外の任意の要素をピクチャーインピクチャーさせることができるようになります。 今までできなかった <audio> や <img>のような要素をピクチャーインピクチャーさせることができるようになるので、CDジャケットを表示させながら音楽を再生させたりでき、webサイト上でできることが広がります。 そのためこの記事では、そんな documentPictureInPictureを使ったピクチャーインピクチャーについて紹介しま