Picture-to-Picture Plugin Example

Play video and Scroll down or click button to see the minimized player.

Code Source

<!--Load css stylesheet files in your website head section-->
<link href="../videojs/skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
<link href="../videojs/plugins/videojs.pip.css" rel="stylesheet" type="text/css" />

<!--Setup video element and source(s)-->
<video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="images/poster.jpg">
		<source src="//opencdn.b-cdn.net/video/demo_360.mp4" res="360" label="360p" type="video/mp4" default>
		<source src="//opencdn.b-cdn.net/video/demo_720.mp4" res="720" label="720p" type="video/webm">
</video>

<!--Load videojs and plugins inside website <body> element-->
<script src="../videojs/video.min.js"></script>
<script src="../videojs/plugins/videojs.pip.js"></script>
<script src="../videojs/nuevo.min.js"></script>

<!--Initialize videojs and plugins-->
<script>
	var player = videojs('player_1');
	player.nuevo({ 
		//option_1: value
	}); 
	player.pip();
</script>

Since version 7 Videojs offers PiP button by default. However it works only if certain browser support such addon.
Currently this is only Chrome browser version 70+.
PiP plugin by Nuevodevel works on every modern browser including mobile devices. It can even work in hybrid mode in those browsers that do not support native PiP.

Possible PiP plugin options

hybrid - set true to use system PiP if only browser support it.
scroll - set false to prevent PiP player on scroll event.
mute - set true to mute minimized player

player.pip ({
	hybrid: true,
	scroll: false,
	mute: true
});