Позиционирование управления видео плеером HTML5

Question

Я работаю с родным видеопроцессором HTML5 в Chrome и имею проблему. Элементы управления, по-видимому, плавают под самим видео, что приемлемо на рабочем столе, но становятся видимыми на мобильных устройствах. Есть ли способ, чтобы он оставался внутри видеокадра?

Я не знаю, с чего начать, поскольку я не могу найти какой-либо способ настроить таргетинг на элементы управления.

#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> 

Благодаря

Answer 1

Вы можете стилизовать элементы управления для <video> элемента с помощью Shadow DOM. В настоящее время он очень ограничен browser support, но вы говорите, что делаете это в Chrome, и, к счастью, Chrome поддерживается.

Sara Soueidan написал an article about how to use Shadow DOM to hide video controls. Вы можете использовать это как отправную точку. Казалось бы, вы ищете стиль video::-webkit-media-controls и/или его потомков.