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/

L’entreprise de design FauvelKhan créée par deux étudiants britanniques, Luke Khan et Warren Fauvel, était en course pour obtenir le prix de la meilleure technologie liée à la musique à l’occasion du festival SXSW (Festival du film et de la musique interactive) qui se déroulait à Austine (Texas).
Le produit des deux designers est un t-shirt qui permet de faire du Air Guitar un peu spécial, puisqu’il peut se transformer en une « véritable » guitare. Concrètement, il s’agit d’un tee-shirt sur lequel est imprimé le corps d’une guitare et un flash-code.
Une fois connecté au site The Last Republic et le flash code situé au bon endroit (en face de la webcam), le morceau peut commencer.

Les créateurs expliquent avoir développé cette technologie pour le groupe The Last Republic, mais espèrent maintenant que ça révolutionnera l’industrie de la musique. Luke Khan, qui est diplômé en design industriel, explique ainsi à l’agence Press Association :

C’était une véritable surprise d’être la seule entreprise basée en Europe à être sélectionné pour le concours. SXSW nous met sur la scène internationale et cela signifie que l’entreprise a de l’avenir.

La vidéo de démonstration :

The Last Republic – Augmented Reality – Air Guitar from FauvelKhan

Tous deux jeunes diplômés, Fauvel & Khan ont gagné la récompense « Boostrap » pour ce concept original au festival SXSW. Le « Boostrap » est le prix qui récompense le projet le plus innovant qui nécessite le moins d’investissement financier. Ils peuvent espérer bénéficier d’une rapide reconnaissance et d’une grosse médiatisation.
Une belle innovation !!