Smartest way to Watermark video.js Player

Question

we're migrating our player from Flowplayer to Video.js. In our current Flowplayer installation we do use an option to add a watermark over our videos:

flowplayer( .. , .. , {logo:{'url':'/path/to/watermark.png'}});

Which would be the best way to replicate this behavior in Video.js ?

Ideally the solution will be a CSS which we already tried (using a background in a upper layer with higher z-index) But that watermark gets lost when you go fullscreen,

Any idea? Thanks in advance

Answer 1

HTML/CSS solutions should work, if you can add an element at the same level in the DOM hierarchy as the <video> tag it looks like it will still appear in fullscreen mode. You may have to change the CSS to make the watermark appear the way you want it to depending on whether fullscreen is enabled or not, but you can watch the size of the video element to detect that. I was able to achieve this by editing the DOM on the video.js site (I just added an <h1> right before the <video>):

http://imgur.com/a/ABItT