Водяной знак html5 видео

Question

Я пытался добавить водяные знаки к видео html5 для моего сайта. Каждый раз, когда я go в полноэкранном режиме, lo go не появляется, кто-нибудь может подсказать что-нибудь? Он хорошо работает, когда проигрыватель свернут, но когда я go на весь экран, он исчезает и не будет отображаться на полном экране.

(function() {
 
    function onPlayerReady() {
        var overlay = videoPlayer.overlay();
        $(overlay).html('<img id="overlaylogo" src="http://cs1.brightcodes.net/ben/img/genericlogo.png" />').css({
            position:"fixed",
            height:"100%",
            width:"100%"
        });
        $("#overlaylogo").css({
            position:"absolute",
            bottom:"50px",
            right:"10px"
        });
    }
 
    var _player = brightcove.api.getExperience();
    var videoPlayer = _player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
    var experience = _player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
 
    if (experience.getReady()) {
        onPlayerReady();
    } else {
        experience.addEventListener(brightcove.player.events.ExperienceEvent.TEMPLATE_READY, onPlayerReady);
    }
 
}());

.video {width: 100%;
}
.video-wrapper{
position:relative;
}
.video-wrapper:before{
content:" ";
position:absolute;
background: url(image.png);
background-size:cover;
background-color:black;
width:150px;
height:75px;
top:30px;
left:0px;
pointer-events: none;
}  

<div class="video-wrapper">
<video class="video" controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>