Player background image

This demo shows how you can apply a background image to the player.

 

 
 
 
 
 
 
 
 

 

To apply the background the following CSS snippet can be used:

.theoplayer-skin.vjs-has-started .theo-player-wrapper:before {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.4;
    background: url('https://demo.theoplayer.com/hubfs/Demo_zone/elephants-dream.jpg');
background-repeat: no-repeat;
background-position: center center; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; }

 

Get Started