• Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below
  • Forum
  • Website
  • GitHub
  • Status
  • Translation
  • Features
  • Team
  • Rules
  • Help
  • Feeds
User Links
  • Login
  • Register
  • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below

    Useful Links Forum Website GitHub Status Translation Features Team Rules Help Feeds
    Jellyfin Forum Support General Questions adding watermark to jellyfin

     
    • 0 Vote(s) - 0 Average

    adding watermark to jellyfin

    『D1G』Malek
    Offline

    Junior Member

    Posts: 2
    Threads: 1
    Joined: 2024 Jun
    Reputation: 0
    #1
    2024-06-27, 11:05 PM
    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:
    [Image: 3gKt7H9.png]

    [Image: 0Q9rXNA.png]
    • 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!
    « Next Oldest | Next Newest »

    Users browsing this thread: 1 Guest(s)


    Messages In This Thread
    adding watermark to jellyfin - by 『D1G』Malek - 2024-06-27, 11:05 PM
    RE: adding watermark to jellyfin - by Efficient_Good_5784 - 2024-06-28, 01:48 AM
    RE: adding watermark to jellyfin - by 『D1G』Malek - 2024-06-28, 02:40 AM

    • View a Printable Version
    • Subscribe to this thread
    Forum Jump:

    Home · Team · Help · Contact
    © Designed by D&D - Powered by MyBB
    L


    Jellyfin

    The Free Software Media System

    Linear Mode
    Threaded Mode