To Display Overlay Element, instead of making video fullscreen, make parent of Video Element Fullscreen.
See Example Here - https://jsfiddle.net/tv1981/tm069z9c/128/
In following structure, I am making 'container' fullscreen
<div id="container">
<div class="btn-fs" id="btnFS">
Fullscreen
</div>
<div class='logo'>
Logo Overlay
</div>
<video width="100%" height="100%" autoplay muted>
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
<div class='footer'>
This is Test Overlay for Video
</div>
</div>
JavaScript
fs.addEventListener('click', goFullScreen);
function goFullScreen() {
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;
if (fullscreenElement) {
exitFullscreen();
} else {
launchIntoFullscreen(document.getElementById('container'));
}
}
This is working in Chrome Version 60.0.3112.101 (Official Build) (64-bit), FireFox Developer Edition 56.0b5 (64-bit)