I want to create a video watermark, which end user can not remove by manipulating DOM. Currently I tried adding watermark by using css and overlays, which is pretty easy to remove if user has even a little knowledge about DOM and browser elements.
You can try one trick, but this is just a theory - instead of displaying all images directly, create an SVG wrapper that will be displaying actual video, something like this.
Then on your main page, display this SVG control using img or iframe.
Sample.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<text x="0" y="0">Some watermark goes here</text>
<foreignObject x="0" y="0" width="300" height="100">
<video xmlns="http://www.w3.org/1999/xhtml" width="300" height="100">
<source src="some-video.mp4" type="video/mp4" />
</video>
</foreignObject>
</svg>
Main page
<img src="sample.svg" />