Videojs Picture-in-Picture plugin

Picture-in-Picture plugin for Videojs and Nuevo plugin

"Picture-in-Picture" premium plugin was developed to support both, videojs with Nuevo plugin and default videojs player, any skin.
Picture-in-Picture small palyer window appears at the bottom right corner when you click PiP butoon in controlbar or scroll down page and player is outside of view area. When you close PiP small player (click on icon in right-top corner), PiP player will not appear when page scrolled down. Still you can show PiP player when you click PiP button in controlbar. When you click PiP Back icon (top-left corner) scroll functionality is back.

PiP plugin setup is very simple.

Code snippet


// Load player and plugins javascript files

<script src="//www.domain.com/videojs/video.min.js"></script>
<script src="//www.domain.com/videojs/videojs.pip.js"></script>
<script src="//www.domain.com/videojs/nuevo.min.js"></script>

// Initialize player and plugins

<script>
var player = videojs('video_1');
player.nuevo({
	option: option_value
});
player.pip();
</script>

You can order to mute player when player goes minimized to PiP window

Code snippet

player.pip({mute:true});

From version 7.6 videojs version has built-in PiP button for Chrome desktop browser. If you want to hide it, the easiest way is to set "display:none;" for appropriate rule in player's css stylesheet.
Initially Picture-in-Picture was supported by Chrome 70.x browser only. Recently it is supported also by desktop's Opera and Firefox browsers. There is no option to show PiP player on browser's scroll event.
Nuevo PiP plugin is complete replacement of Videojs PiP option. It is based on browser's window and works for every modern browser and mobile devices!