Avoir un lecteur vidéo avec un ratio intrinsèque

Attention ! Cet article a plus de 1 an (2008 jours), ce qui signifie qu'il n'est pas forcément à jour !

De nos jours, nous parlons beaucoup de "responsive web design" mais qu’en est-il pour les vidéos?

Nous pouvons avoir le plus beau design, avec des colonnes qui s’ajustent selon le format de l’écran, mais reste que notre vidéo, bien montée, affichée en 16:9, est complètement foutue quand vient le temps de redimensionner la page.

Alors, voilà une petite solution pour que notre lecteur vidéo garde son ratio. Avec cette solution, l’idée est simple, créer une boîte avec son propre ratio (ici j’ai utilisé 16:9), ensuite s’assurer que le lecteur à l’intérieur suive les dimensions de cette boîte. Simple et efficace.

MO

Alors voici le code pour cet exemple:

HTML

<div id="containing">
    <div class="videoWrapper">
        <iframe width="560" height="315" src="http://www.youtube.com/embed/tvY7Nw1i6Kw?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

#containing {
    width: 50%;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

La magie du code vient de la propriété PADDING que nous ajustons par un pourcentage selon la largeur de la boîte (Pour créer un ratio 16:9 nous divisons 9 par 16). Le 25px est utilisé pour compenser pour la hauteur du frame du lecteur.

Catégories :

HTML CSS