PUBLIC MARKS from decembre with tags css & video

Pour tous ceux qui aiment fouiller, des milliers de ressources photos, sons, vidéos classées par thématique. Vérifier les informations concernant les utilisations commerciales en fonction des copyrights.

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

To make the video fullscreen: video#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: url(polina.jpg) no-repeat; background-size: cover; } Conclusion: “Background” video can be a very powerful feature on a site, but with great power comes great responsibility: please use such features judiciously.

jPlayer 2.9.2 Developer Guide_ If you are new to jPlayer, check out the Quick Start Guide.

► Video Problems.... ► Full screen capability is disabled when an adblocker is detected. ► Just drop the "DIV". ► A script creates a random Style." ... style=" and inputs itself into the html of the page ... ► CSS SOLUTION : videofun.me##[style="position: absolute; width: 100%; min-height: 90px; left: 0%; bottom: 40px; background-color: rgb(0, 0, 0); padding: 0px; z-index: 999;"]

Voici un tutoriel vidéo plus théorique que d'habitude qui vous permettra donc d'en apprendre un peu plus sur le positionnement CSS avec les attributs : Position, qui permet de définir le type de positionnement (absolute,relative...) Float/Clear, la propriété qui permet de modifier l'enchainement logique des éléments pour un enchainement horizontal (c'est plus clair en vidéo :) ) Display, la différence entre les élements inline et block Vous verrez aussi analyser la structure d'un site internet pour apprendre à développer vos propres structures...

Voici un tutoriel composé de 3 vidéos sur l’utilisation de Firebug.

Fun with Firebug