Balise vidéo HTML5 de largeur et de hauteur

Tous, j'ai une certaine lecture des vidéos sur mon site, et je souhaite qu'il joue width: 100%; height: 600px; mais rien j'ai essayé a travaillé jusqu'à présent.

Quand j'ai mis le height: 600px; la largeur de la vidéo est proportionnelle. En gros, je veux obtenir le même effet que background-size: cover, avec une hauteur de 600px. Je suis à l'aide de CSS, et cette partie peut être changé, mais je suis plus préoccupé par la façon de parvenir à une coutume de la hauteur et la largeur d'une vidéo, si cela est possible. Merci.

TOUTE aide est très appréciée. Voici mon code pour le <video>

<video loop="loop" poster="img/waves1.jpg" style="width: 100%; height: 600px;" autoplay="autoplay">
            <source src="video/sunset.webm" type="video/webm">
            <source src="video/sunset.mp4" type="video/mp4">
</video>
InformationsquelleAutor user3150191 | 2014-08-06
  1. 8

    Une façon d'y parvenir consiste à envelopper la vidéo dans un div, et donnent à la hauteur de 600px et overflow: hidden.

    Par exemple:

    <div style="width: 100%; height: 600px; overflow: hidden;">
    <video loop="loop" poster="img/waves1.jpg" style="width: 100%;" autoplay="autoplay">
            <source src="video/sunset.webm" type="video/webm">
            <source src="video/sunset.mp4" type="video/mp4">
    </video>
</div>

    Noter que la vidéo peut être coupée vers le bas si sa quote-hauteur est supérieure à 600px et que plus vous étirez la fenêtre, plus la vidéo sera coupé.

    Ici est un jsFiddle l'aide de ce code:

    <div style="width: 100%; height:200px; overflow: hidden;">
    <video loop="loop" style="width: 100%;" autoplay="autoplay">
        <source src="http://opcdn.battle.net/static/hearthstone/videos/home-header-bg.webm" type="video/webm"/>
    </video>
</div>
    • désolé, mais ce n'est pas de travail pour moi.
    • Hm, découvrez le jsFiddle je viens de poster. Est-ce que vous cherchez?
    • perfecto! Merci!!!!
    InformationsquelleAutor Senju