Video controls only appear on mouseover - want them visible always

[ChrisjChrisj]

The webcam player on the web page, records successfully. After selecting “Start Recording” the video controls bar only appears upon mouseover. How can I change that so the controls bar is always visible, not just on mouseover? Thanks for any help. Here’s the code:

 <video id="" controls="" autoplay=""></video>
 <br>
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled>Stop Recording</button>
<button id="upload-video" onclick="InitUploading()" disabled="">Upload Now</button>

[chrisofarabia]

What does the CSS/JavaScript for the video player look like?

[ChrisjChrisj]

Thanks for your reply. Here’s the additional code you requested.

		            video {
		              max-width: 100%;
		              border: 5px solid yellow;
		              border-radius: 9px;
		              width: 680px;
		              height: 420px;
		            }
		            body {
		              background: ffffff;
		            }
		            h1 {
		              color: #800000;
		            }

<script type="text/javascript">
var video = document.querySelector('video');

        function captureCamera(callback) {
            navigator.mediaDevices.getUserMedia({
                audio: true,
                video: true
            }).then(function (camera) {
                callback(camera);
            }).catch(function (error) {
                alert('Unable to capture your camera. Please check console logs.');
                console.error(error);
            });
        }

        function stopRecordingCallback() {
            video.src = video.srcObject = null;
            video.src = URL.createObjectURL(recorder.getBlob());
            PrepareBlob();
            document.getElementById("upload-video").disabled = false;

            // release camera
            recorder.camera.getTracks().forEach(function (track) {
                track.stop();
            });

            recorder.camera.stop();
            recorder.destroy();
            recorder = null;
        }
        var recorder; // globally accessible
        document.getElementById('btn-start-recording').onclick = function () {
            this.disabled = true;
            document.getElementById("upload-video").disabled = true;
            captureCamera(function (camera) {
                setSrcObject(camera, video);
                video.play();
                recorder = RecordRTC(camera, {
                    type: 'video'
                });
                recorder.startRecording();
                // release camera on stopRecording
                recorder.camera = camera;
                document.getElementById('btn-stop-recording').disabled = false;
            });
        };
        document.getElementById('btn-stop-recording').onclick = function () {
            this.disabled = true;
            document.getElementById('btn-start-recording').disabled = false;
            recorder.stopRecording(stopRecordingCallback);
        };
        var blob, fileName, fileObject;
        function PrepareBlob() {
            // get recorded blob
            blob = recorder.getBlob();
            // generating a random file name
            fileName = getFileName('webm');
            // we need to upload "File" --- not "Blob"
            fileObject = new File([blob], fileName, {
                type: 'video/webm'
            });
        }
        function InitUploading()
        {
            uploadToPHPServer(fileObject, function (response, fileDownloadURL) {
                if (response !== 'ended') {
                    document.getElementById('header').innerHTML = response; // upload progress
                    return;
                }

		document.getElementById('header').innerHTML = '<a href="' + fileDownloadURL + '" target="_blank">' + fileDownloadURL + '</a>';
		alert('Successfully uploaded recorded blob.');

                alert('Successfully uploaded recorded blob.');
                // preview uploaded file
                video.src = fileDownloadURL;
                // open uploaded file in a new tab
                window.open(fileDownloadURL);
            });
        }

        function uploadToPHPServer(blob, callback) {
            // create FormData
            var formData = new FormData();
            formData.append('video-filename', blob.name);
            formData.append('video-blob', blob);
            callback('Uploading recorded-file to server.');
            makeXMLHttpRequest('save.php', formData, function (progress) {
                if (progress !== 'upload-ended') {
                    callback(progress);
                    return;
                }
                var initialURL = 'uploads/' + blob.name;
                callback('ended', initialURL);
            });
        }

        function makeXMLHttpRequest(url, data, callback) {
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    if (request.responseText === 'success') {
                        callback('Upload Complete');
                        return;
                    }
                   // alert(request.responseText);
                        window.location.href = '/index.com/';
                    return;
                }
            };
            request.upload.onloadstart = function () {
                callback('Upload started...');
            };
            request.upload.onprogress = function (event) {
                callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
            };
            request.upload.onload = function () {
                callback('Progress Ending');
            };
            request.upload.onload = function () {
                callback('Upload Complete');
            };
            request.upload.onerror = function (error) {
                callback('Upload failed.');
            };
            request.upload.onabort = function (error) {
                callback('Upload aborted.');
            };
            request.open('POST', url);
            request.send(data);
        }
        // this function is used to generate random file name
        function getFileName(fileExtension) {
            var d = new Date();
            var year = d.getUTCFullYear();
            var month = d.getUTCMonth();
            var date = d.getUTCDate();
            return 'RecordRTC-' + year + month + date + '-' + getRandomString() + '.' + fileExtension;
        }

        function getRandomString() {
            if (window.crypto && window.crypto.getRandomValues && navigator.userAgent.indexOf('Safari') === -1) {
                var a = window.crypto.getRandomValues(new Uint32Array(3)),
                    token = '';
                for (var i = 0, l = a.length; i < l; i++) {
                    token += a[i].toString(36);
                }
                return token;
            } else {
                return (Math.random() * new Date().getTime()).toString(36).replace(/\./g, '');
            }
        }
    </script>

I look forward to any additional help