jw player 6.7, change logo image when player turns fullscreen

Question

I would like to enlarge the logo when the player turns full screen and change it back to small when the player size restores. I can think of following approaches:

1. Detect the full screen event and change the url of logo image.
2. The image size to have a suitable dimensions modified with css on player load then, detect the full screen event and change the size of image (using css of whatever) and change the size again when player restores.

I welcome any suggestions and any approaches so long as it is viable. Because I absolutely have to get this done.

NOTE: the approach should work on all major browsers.

Answer 1

Note: The following solution will work in JW7+ versions of the player. I highly suggest upgrading your player to version 7.

The JW Player css skinning model has a flag built in to detect when the player is in fullscreen mode: .jw-flag-fullscreen. Using that flag to target the logo (.jw-logo), you'll be able to resize and change the image URL using css. Below is an example of how to use the fullscreen flag.

.jw-flag-fullscreen .jw-logo {
    background-image: url('logo.svg') !important;
    background-size: 100px;
    background-position: cover;
    width: 100px !important;
    height: 100px !important;
}

JS Fiddle example

You can find more info in the JW Player CSS Skinning reference. https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/css-skinning/skins_reference/