CODEWITHSUNDEEP
htmlhtml5-video
user18375
user18375

Reputation: 43

Positioning HTML5 video player controls

I am working with the HTML5 native video player in Chrome and have an issue. The controls seem to float underneath the video itself, something which is acceptable on desktop but get quite visible on mobile devices. Is there any way to have it stay inside the video frame?

I don't really know where to begin as I can't find any way to target the controls specifically.

  #movie-player {
  padding: 0.7em;
  margin: 0 auto;
  width: -webkit-calc((100% - 3em) / 1);
  width: calc((100% - 3em) / 1);
  max-width: 600px;
  border: 1px solid #e7e7e7;
}    



        <figure>
                    <video class="fadescript" id="movie-player" width="640" height="360" preload controls>
                        <source src="video/explainervideo.mp4" />
                        <source src="video/explainervideo.ogv" />
                        <source src="video/explainervideo.webm" />
                    </video>
        </figure>

Thanks

Upvotes: 2

Views: 6237

Answers (1)

Trott
Trott

Reputation: 70163

You can style the controls for the <video> element using Shadow DOM. It has very limited browser support at this time, but you say you are doing this in Chrome, and happily, Chrome is supported.

Sara Soueidan wrote an article about how to use Shadow DOM to hide video controls. You can use that as a starting point. It would seem that you are looking to style the video::-webkit-media-controls and/or its descendants.

Upvotes: 2

Related Questions