Videojs Picture-in-Picture plugin

One time fee € 10.00

Add to cart Buy now

Picture-in-Picture plugin for Videojs version 6 or 7

Picture-in-Picture by Nuevodevel is original plugin which can be used standalone or as a replacement of Video.js 7.6 PiP option. It's based on browser's window so unlike browser's native PiP, which currently is supported by Chrome desktop browser only, PiP by Nuevodevel is cross-browser supported, including mobile browsers.

Picture-in-Picture small palyer window appears at the bottom right corner when you click PiP button 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. On desktop browsers you can drag and drop PiP Player into any new window position.

PiP plugin setup is very simple.

// Load player and pip css stylesheet file
<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet">
<link href="//www.domain.com/videojs/plugins/videojs.pip.css" rel="stylesheet" type="text/css">

// Load player and plugins javascript files
<script src='https://vjs.zencdn.net/7.5.5/video.js'></script>
<script src="//www.domain.com/videojs/videojs.pip.js"></script>

// Setup video tag with media file(s)
<video id="video_1" class="video-js vjs-fluid" controls preload='auto' width="640" height="264"> poster="VIDEO_POSTER.jpg"
<source src="VIDEO.mp4" type="video/mp4">
</video>

// Initialize player and plugins
<script>
var player = videojs('video_1');
player.pip();
</script>


PiP plugin by Nuevodevel has 2 options that you might be interested to use. By default our PiP plugin replace browser's based PiP completely. If you wish to keep browser PiP currently supported by Chrome desktop browser only, you can set option "hybrid" = true. By default PiP player size is 60% of window size, but maximum width is 360 px. You can change maximum size by changing option "maxWidth". See example code setup below.

<script>
var player = videojs('video_1');
player.pip({
   hybrid:true,
   maxWidth:420
});
</script>