change logo and preview image size on full screen

Question

I am using a pro version of Jwplayer. Can I change the size of the logo image for branding and the image size of the Video preview (VTT) in fullscreen mode ? I need to show bigger image in video preview when on fullscreen and smaller when restored. Same for my custom logo.

This the code I am using

  jwplayer("container").setup({
        sources: [{
            file: "http://15.20.19.73:1935/vod/smil:pls183.smil/jwplayer.smil"
        }],
        tracks: [{
            file: "http://15.20.19.73/video_vtt/thumbs/183.mp_vtt/183.mp_thumbs.vtt",
            kind: "thumbnails"
        }],

        events: {
            onComplete: function() {
                endHandler();
            }
        }


    });

So It shows a video preview and a logo on left-top position. But it is always of fixed size. In Fullscreen or Not. Can I vary the size of video preview image (Like Youtube does) and the logo size.

You can post your code in the question can't you? Remember to create a minimal, verifiable, and complete example (MVCE). — Charlie Fish, Sep 09 '16 at 17:38

GTIcontrol · Accepted Answer · 2021-05-27T12:04:38.500

Below the solution that is working today. For JWplayer 8 and others.

//name player div...
var playerInstance = jwplayer("player");

//Set start logo...
playerInstance.setup({
    file: '//gticontrol.com/video.m3u8',
    repeat: true,
    autostart: shouldAutostart,
        "logo": {
        "file": "https://gticontrol.com/br_tnt_m.png",
        "hide": "true",
        "position": "top-left"
        }             
});

//Creat function to change logo
function changeLogo(playerId, logoUrl){
    var logoElem = document.querySelector('#'+playerId + ' .jw-logo');
    logoElem.style.backgroundImage='url('+logoUrl+')';
};

//Call If need change logo...
changeLogo(playerInstance.id, 'https://gticontrol.com/mx_hbo-2_m.png');

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. — Tyler2P, May 26 '21 at 14:59

score 0 · Answer 2 · answered Sep 27 '16 at 20:48

You can set the custom logo to a different size in fullscreen using the .jw-flad-fullscreen class in CSS.

.jw-flag-fullscreen .jw-logo {
      width: 150px !important;
      height: 150px !important;
    }

CSS Reference: https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_reference/

JW Player's video transcoding outputs thumbnails at a static 120px width size, so you cannot adjust the thumbnail size in the same way: http://assets-jpcust.jwpsrv.com/strips/92XQ91bP-120.jpg

change logo and preview image size on full screen

2 Answers2