CODEWITHSUNDEEP
javascriptjwplayerjwplayer7
mridul4c
mridul4c

Reputation: 8767

change logo and preview image size on full screen

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.

Upvotes: -1

Views: 1247

Answers (2)

GTIcontrol
GTIcontrol

Reputation: 34

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');

Upvotes: 1

Josie Keller
Josie Keller

Reputation: 477

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

Upvotes: 0

Related Questions