Make HTML5 Video controls always visible

HTML & CSS
1

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
2

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
3

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

5

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.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.