Skip to content

Instantly share code, notes, and snippets.

@kadamwhite
Created December 13, 2012 22:20
Show Gist options
  • Save kadamwhite/4280595 to your computer and use it in GitHub Desktop.
Save kadamwhite/4280595 to your computer and use it in GitHub Desktop.
A basic JW Player plugin to display a text banner overlay at the top of the video player instance
// Pass the plugin reference and configuration parameter ('text') to the embed script
jwplayer('id-of-container').setup({
file: '/path/to/my/video.mp4',
plugins: {
'/path/to/overlay.js': {
text: 'Text that you want to go within the overlayed banner'
}
}
});
(function( jwplayer ) {
var overlay = function( player, config, div ) {
var setupOverlay = function() {
div.innerHTML = config.text;
};
var showOverlay = function() {
setStyle({
opacity: 1
});
};
var hideOverlay = function() {
setStyle({
opacity: 0
});
};
var setStyle = function( object ) {
for(var style in object) {
div.style[ style ] = object[ style ];
}
};
// Matches our text container to the size of the player instance
this.resize = function( width, height ) {
setStyle({
position: 'absolute',
margin: '0',
padding: '10px 15px 10px',
background: 'rgba( 0, 0, 0, .7 )',
color: 'white',
fontSize: '12px',
width: '100%'
});
};
// Bind player events
player.onReady( setupOverlay );
player.onPlay( hideOverlay );
player.onPause( showOverlay );
player.onComplete( showOverlay );
};
jwplayer().registerPlugin( 'overlay', overlay );
})( jwplayer );
@sdfrao
Copy link

sdfrao commented Mar 31, 2016

not working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment