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" />

<!--Load videojs and plugins inside website <body> element-->
<script type="text/javascript" src="../videojs/video.min.js"></script>
<script type="text/javascript" src="../videojs/plugins/videojs.pip.js"></script>
<script type="text/javascript" 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
});