Réflexions sur le webdesign, les nouvelles technologies, la vie ...

CSS : Vidéos élastiques

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/

Lundi : c’est jQuery

En ce lundi un peu maussade (météo, lendemain de weekend), voici une sélection de plugins jQuery très très sympathiques.

30 « fantastiques » plugins en jQuery :
http://speckyboy.com/

10 plugins jquery très utiles :
http://webdesignledger.com/

15 plugins + tutos (images + forms)
http://fabien-berthoux.blogduwebdesign.com/

En tous, cinquante-cinq plugins, si vous ne trouvez pas votre bonheur … moi c’est fait !

The Hate Destroyer

Fotogramma25 présente The Hate Destroyer, un documentaire Germano-Anglais de Vincenzo Caruso et Fabrizio Mario Lussu qui relate le quotidien d’Irmel Mensah-Schramm, une allemande de 65 ans. Une héroïne sans super-pouvoirs, ni muscles, armé d’une bombe de peinture, et un grattoir, qui fait la chasse quotidienne aux graffitis en Allemagne. Pendant 25 ans, avec ces armes et sa volonté de fer, elle a recouvert les graffitis et enlevé les autocollants antisémites et homophobes : plus de 80.000 autocollants depuis 1986.

L’indifférence est son pire ennemi, et à ceux qui minimisent ces actes racistes elle répond :

Les gens qui dessinent une croix gammée d’un mètre sur un mur, doivent se rendre compte de ce qu’ils font.

THE HATE DESTROYER (Demo-version) from Fotogramma25.

 Page 5 de 22  « First  ... « 3  4  5  6  7 » ...  Last »