adding watermark to jellyfin

[『D1G』Malek]

I am working on adding a watermark to the videos I stream through Jellyfin. I've successfully added the watermark using HTML and CSS code. The code works, but I'm facing an issue with positioning the watermark accurately in the corner of the video itself, rather than the corner of the player container. This causes inconsistency as the watermark sometimes appears partially on the video and partially on the surrounding black bars.

I am using Jellyfin in a Docker container, the official version 10.9.6, on Ubuntu Server 22.04.


The code I added HTML:
in  playback-video-index-html.XXXXXXXXX.chunk.js

PHP Code:

<div class="watermark">
        <img src="/web/logo-no-background1.png" alt="Watermark Image">
    </div> 


CSS (in Custom CSS section):

PHP Code:

.watermark {
    position: absolute;
    top: 15px; /* يظهر في الزاوية العلوية بالقرب من الفيديو */
    left: 15px; /* يظهر في الزاوية اليمنى بالقرب من الفيديو */
    z-index: 10000;
    pointer-events: none;
}

.watermark img {
    max-width: 150px; /* حجم الصورة الأقصى */
    height: auto;
    display: block;
    opacity: 0.3; /* شفافية الصورة بنسبة 70% */
    border-radius: 5px; /* لإضافة حواف مستديرة إذا لزم الأمر */
} 


I have also tried modifying the site correctly. I downloaded the client from GitHub and used npm, but I got the same result as well

The issue I'm encountering:

• The watermark appears correctly when the video is played, but it doesn't always show in the correct corner on the video itself. Sometimes it appears on the surrounding black bars, and other times it is partially on the video.
  
• I am looking for a way to adjust the code or use a feature in Jellyfin to ensure the watermark consistently displays based on the video’s dimensions, regardless of the player's container dimensions.
  

Is there a way to modify the code or leverage a feature in Jellyfin to ensure the watermark is accurately positioned in the corner of the video itself, based on the video’s dimensions? Any help or guidance would be greatly appreciated. Thanks in advance!

[Efficient_Good_5784]

What are you trying to achieve with this? Since this is CSS, people that understand that can simply remove the watermark. Additionally, if you have downloads enabled on the server, they will still be downloaded without the watermark.

The only way to truly guarantee that the videos have a watermark is to burn that in directly into the video.

[『D1G』Malek]

Thank you for your response.

While it's true that someone with simple knowledge of CSS could potentially remove the watermark, the same logic could be applied to many aspects of any website—where someone with basic knowledge can alter or remove elements as they see fit. However, this doesn't mean we shouldn't implement these features.

My primary goal with this is to explore and improve my skills.Adding a watermark is a simple idea that I wanted to experiment with, among many other small tweaks and customizations I've been making to the server. I enjoy tailoring and modifying the server to fit my needs, even if it involves minor details.

The server I am working on is a private server on a local network, so this is more about personal learning and customization than securing the content.

I appreciate your point about burning the watermark directly into the video for true security. However, for my purposes, implementing a CSS-based watermark is a valuable exercise in itself.

Thank you for your understanding.