Custom HTML5 video player not going full screen? - html

Question

Hi so I am working on a project and am making a custom video player I used this website to help make it http://www.inwebson.com/demo/html5-video/demo1/. So my problem is that the controls will go full screen fine but the video stays its original size in the middle with black filling the rest of the screen.
Here is my full screen code:
$('.buttonFullscreen').on('click', function() {
$(this).toggleClass('enterFullscreenBtn');
if ($.isFunction(video[0].webkitEnterFullscreen)) {
if ($(this).hasClass("enterFullscreenBtn")) {
document.getElementById('videoContainer').webkitRequestFullScreen();
} else {
document.webkitCancelFullScreen();
}
} else if ($.isFunction(video[0].mozRequestFullScreen)) {
if ($(this).hasClass("enterFullscreenBtn")) {
document.getElementById('videoContainer').mozRequestFullScreen();
} else {
document.mozCancelFullScreen();
}
} else {
alert('Your browsers doesn\'t support fullscreen');
}
});
and here is my video and controls code:
<div id="videoContainer" width='{{width}}' height='{{height}}'>
<video id='{{videoContainerID}}-video' class='{{videoID}}' controls poster='{{thumbnailURL}}' width="100%">
<source src='{{videoURL}}' type='video/mp4'></source>
<p class='hlplayer-unsupported-player'>Your browser is not supported by this player. This video player is still in development.</p>
</video>
<div class='hlplayer-video-title'>{{title}}</div>
<div class='controls'>
<div class='top-bar-controls' width='{{width}}'>
<div class='progress'>
<span class='buffer-bar'></span>
<span class='time-bar'></span>
</div>
<div class='time'>
<span class='current'></span> / <span class='duration'></span>
</div>
</div>
<div class='bottom-bar-controls' width='{{width}}'>
<div class='buttonPlay button' title='Play/Pause'></div>
<div class='buttonSettings button' title='Settings'></div>
<div class='buttonNotes button' title='Take Notes'></div>
<div class='buttonLight lighton button' title='Light On/Off'></div>
<div class='buttonFullscreen button' title='Fullscreen'></div>
<div class='volume' title='Volume'>
<span class='volume-bar'></span>
</div>
<div class='sound sound2 button' title='Mute/Unmute'></div>
</div>
</div>
<div class='loading'></div>
<div class='hlplayer-settings'>
<label class='settings-checkbox-label'><input class='settings-checkbox' id="show-notes-checkbox" type='checkbox' name='notes' checked></input> Show Notes</label>
</div>
</div>
Can you think of why this is happening? Thanks in advance.

Answer 1

<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="videos/mikethefrog.webm" type="video/webm">
<source src="videos/mikethefrog.ogv" type="video/ogv">
<source src="videos/mikethefrog.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
Download the video instead.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="full-screen">Full-Screen</button>
</div>
</div>
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
Or you can use the following:
<script>
var videoElement = document.getElementById("myvideo");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else {
videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
If none of these work, just use a different player. There are plenty out there that work :).