Picture2Picture plugin for Videojs player

Start playback and Scroll down to see the effect

Overview This is premium plugin by Nuevolab, often called as "Picture to Picture", similar as used by Youtube on mobile devices or by Facebook. When there is lot of content on website under video player and user scroll down outside of player, a small clone of video player will appear in bottom right corner of the browser.
Try to scroll browser down to see how P2P plugin works. This especially useful feature on mobile devices.


P2P plugin setup for Videojs player with Nuevo plugin You need to load javascript P2P plugin, after core videojs javascript link.
<link href="//example.com/path/video-js/video.min.js" rel="stylesheet">
<script src="//example.com/video-js/plugins/videojs.p2p.min.js"></script>
<script src="//example.com/path/video-js/nuevo.min.js"></script>
Initialize videojs with Nuevo plugin and P2P plugin.

var player = videojs('video_1',{},function(){ 
	this.nuevoPlugin({
		option: option_value
	});
	this.pic2pic();
});

Minimized P2P player has 2 buttons enabled by default
« - scroll back to original video player.
x - close P2P player (will not show anymore).
You can disable close button by setting closeallow option to false.
You can also order to mute player when minimized by setting mute option to true.

this.pic2pic({ closeallow:false, mute:true });


Calculating player position when it's back to normal display depends on player's parent container style. There are 2 possible positions calculated. You can switch between two values for container option to control player's position when it's back to default position. Default value is block. If it doesn't work well on your website you can try the value inline.

this.pic2pic({ container: "inline" });


P2P plugin works also with standard vodeojs player without Nuevo plugin.
You just need to load P2P plugin javascript file and initialize videojs player with P2P plugin:

<script src="//example.com/path/video-js/video.min.js"></script>
<script src="//example.com/video-js/plugins/videojs.p2p.min.js"></script>

<script>
videojs("video_1", {}, function(){
	this.pic2pic();
});
<script>

Picture 2 Picture plugin is free for Nuevo plugin bundle orders.
For other videojs users (with or without nuevo plugin) you need to purchase it.
€ 9.90