Make HTML5 Video controls always visible – HTML & CSS – SitePoint Forums

Make HTML5 Video controls always visible – HTML & CSS – SitePoint Forums


Hello
Can we make HTML5 video controls always visible?
thanks
vineyard

<!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 I like it

Having the “controls” attribute on your video element should already be done for you. I tried it on the last edge, Firefox and Chrome. They all show the controls all the time. Are you using another browser?

Here is the example I looked at



Source link

Related post

Q&A: Bold Schools Can Use Technology to Serve Pedagogy

Q&A: Bold Schools Can Use Technology to Serve Pedagogy

The word “bold,” as I use it, is just a mash-up of the words “mixed” and “old,” as a reminder that…
HCL Group acquires majority stake in vernacular edtech platform GUVI

HCL Group acquires majority stake in vernacular edtech platform…

IT firm HCL Group has acquired a majority stake in vernacular edtech platform GUVI that offers technical courses, the company said…
NIT Srinagar’s Torus club organises model quiz

NIT Srinagar’s Torus club organises model quiz

Torus club of NIT Srinagar is organizing a modeling competition Posted on Friday, January 7, 2022 Srinagar, January 06: Torus-design thinking…

Leave a Reply

Your email address will not be published.