Picture-in-picture for Vue 3.

One component around the native Picture-in-Picture Web API. Pop the video out, switch tabs, and it keeps playing on top of every window.

exposed method

events

Toggle the video to see events.

Install

Vue 3 is the only peer dependency. The component ships no styles: pass your own classes through the option objects.

pnpm add v-pip

<script setup lang="ts">
  import { ref } from 'vue';
  import { VPip } from 'v-pip';

  const floating = ref(false);
</script>

<template>
  <VPip
    :video-options="{ src: '/clip.mp4', poster: '/clip.jpg' }"
    :button-options="{ label: 'Pop out' }"
    @video-in-pip="floating = $event"
  />
</template>

Props

Call togglePip() on a template ref to drive the video from your own controls.

prop	type	what it does
video-options	{ src, poster?, class?, wrapper?, width?, height? }	Attributes for the video element and its wrapper.
button-options	{ label, type?, class?, wrapper? }	The toggle button. Hidden when the browser has no PiP API.
wrapper	string	Class on the outer element.

Events

event	payload	when
video-in-pip	boolean	true on enter, false on leave.
requesting-pip-failure	unknown	requestPictureInPicture() rejected.
exiting-pip-failure	unknown	exitPictureInPicture() rejected.