os controles do player html5 no safari são muito longos - jquery, css, html5, vídeo, player

Veja aqui:

Por alguma razão, meu player html5 no safari parece um pouco mais longo que a largura do filme. Eu não consigo controlá-lo com style = "width: qualquer coisa" Alguma idéia?

<video id="vid1" width="960" height="540" onclick="this.paused?this.play():this.pause();" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

Respostas:

Eu só descobri. Eu tinha isso no meu css:

#vid1::-webkit-media-controls-panel {
width: calc(100%+30px); /* Adjust as needed */
}

Você pode ajustar dinamicamente a largura do seu contêiner de vídeo à largura do seu vídeo carregado. Você pode usar a propriedade videoWidth para isso.

$("#vid1").on("loadedmetadata", function(){
var videoW = $(this)[0].videoWidth;
$(this).css("width", videoW);
});

Editar:

Na sua foto, parece que o vídeo css está usando uma borda grande. Cuidado com css box-sizing propriedade. Faça um teste e remova as bordas ou use box-sizing: border-box; estilo no seu elemento de vídeo.