Physical Graffiti : blog d’un webdesigner curieux

Dans l’optique du développement multiplateformes, on nous demande de penser en amont à toutes les options possibles pour qu’un projet web soit conçu pour passer aussi bien sur les navigateurs web mais aussi sous smartphones et tablettes. J’ai fait des recherches pour un projet ou beaucoup de vidéos étaient présentes. Non seulement les CSS doivent s’adapter aux formats, mais les médias aussi. Avec HTML5 on peut utiliser la balise native « video » avec max-width:100% + height:auto, mais ceci ne marche pas avec l’iframe intégré ou la balise object.
Heureusement, j’ai trouver un petit tuto sur webdesignerwall, qui traite de ce sujet. En HTML5 le code est basique :

Html

video {
max-width: 100%;
height: auto;
}

Comme je l’ai dit au début, ce code ne fonctionne pas si l’intégration utilise balise iframe ou la balise objet, qui est couramment utilisé par la plupart des sites de partage vidéo comme YouTube et Vimeo.

Pour des balises iframe & objet élastiques

Rien de compliqué, il faut juste envelopper le code d’intégration avec une DIV et spécifiez 50% à 60% en bottom. Il faut ensuite définir les éléments enfants (iframe, object et embed) en largeur et hauteur à 100%, le tout en position absolue. Ceci afin de forcer les éléments intégrés à s’élargir automatiquement. Ce qui donne :

Html

< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0" >
< /div >

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

Comment faire pour créer Largeur fixe & élastique ?

Pour contraindre la largeur d’une vidéo, une DIV supplémentaire est nécessaire. Enveloppez la vidéo avec cette autre DIV et spécifiez une valeur de largeur fixe avec max-width: 100%.

CSS

.video-wrapper {
width: 600px;
max-width: 100%;
}

Html

< div class="video-wrapper" >
< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0">
< /div >
< !-- / video -->
< /div >
< !-- / video-wrapper -->

Compatible ?

Ceci fonctionne sur les principaux navigateurs (Chrome, Safari, Firefox, Internet Explorer, Opera, l’iPhone et l’IPAD).

Pour aller plus loin :
http://www.alistapart.com/
http://www.tjkdesign.com/

Grâce à l’article de fran6art sur le Paris Web 2010, j’ai pu voir sa présentation, très intéressante et qui pose une bonne question : quel avenir pour le métier de Webdesigner ? Francis Chouquet pose là la vraie question : est ce qu’un webdesigner doit savoir coder ? Je dois avoué avoir rencontré des graphistes qui refusaient de produire la moindre ligne de code. Leur argument était qu’il existe des intégrateurs pour ça. A quoi je répondais, qu’il est impossible de faire une maquette si l’on ne connait pas les inconvénients et toutes possibilités qu’offrent le support final, c’est à dire les CSS et le HTML.

CSS3 vs Photoshop, quel avenir pour le métier de webdesigner ?