Make HTML5 Video controls always visible

hi
Can we make HTML5 Video controls always visible ?
thanks
vineet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   <style>
    video::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
}
   </style>

 </head>
<body>
                 <div class="text-center video_lap"><video src="Myself.mp4" class="header-video" controls width="600" id="player"></div>
                
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
         
</body>
</html>
1 Like

Having the “controls” attribute on your video element should be doing that for you already. I have tested this on the latest edge, firefox and chrome. All of them show the controls all the time. Are you using some other browser?

Here is the example I looked at

1 Like

hi Martyr2

when you will click on play button , then the controls will become hidden.
try by clicking the play button on the example you provided.
i am checking in Firefox 102.0.1
vineet

The controls are only hidden if the video loses focus (mouse or keyboard). If you keep the mouse over the video or have tabbed into the video, the controls are visible.

I’m not sure why you’d want them visible ALL the time - it makes the video harder to watch.