Container

The CSS that is applied to the video container (<div class="powa" ...></div>) can be customized. The most applicable customization to be made would be to change the default background color (black) or set a default background image. This would only be visible briefly, during the time the player is being instantiated or during the loading phase between one video and the next in a playlist. When setting a background image consider how it will appear if the video is not in a 16:9 aspect ratio (e.g. vertical video).

Default

    PoWaSettings.container = PoWaSettings.container || {};
PoWaSettings.container.style = `
    .powa {
        height: 0;
        overflow: hidden;
        background: black;
        position: relative;
    }

    .powa-fullscreen {
        position: initial;
    }

    .powa-pane {
        height: 100%;
        pointer-events: none;
        position: absolute;
        width: 100%;
        z-index: 2;
    }

    .powa-pane > * {
        pointer-events: auto;
    }`;

Custom Background

    PoWaSettings.container = PoWaSettings.container || {};
PoWaSettings.container.style = `
    .powa {
        position: relative;
        height: 0;
        overflow: hidden;
        background-color: white;

        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url('https://d1bl11pgu3tw3h.cloudfront.net/asset/PoWa.png');
    }

    .powa-fullscreen {
        position: initial;
    }

    .powa-pane {
        height: 100%;
        pointer-events: none;
        position: absolute;
        width: 100%;
        z-index: 2;
    }

    .powa-pane > * {
        pointer-events: auto;