commandes du lecteur html5 dans Safari est trop long

Question

Voir ici:

Pour une raison quelconque mon lecteur html5 dans Safari ressemble un peu plus long que la largeur du film. Je n'arrive pas à le contrôler avec style = "width: whatever" Des idées?

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

Answer 1

Vous pouvez ajuster dynamiquement la largeur de votre conteneur vidéo à la largeur de votre vidéo chargée. Vous pouvez utiliser la propriété videoWidth pour cela.

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

Edit:

Dans votre image, il semble que la vidéo utilisent une css grande frontière. Méfiez-vous des css box-sizing propriété. Faites un test et supprimez les bordures ou utilisez le style box-sizing: border-box; dans votre élément vidéo.

Answer 2

Je l'ai juste compris. J'avais ceci dans mon css:

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