jQuery Tubular : Une vidéo en background de votre site Web

Le titre semble intéressant ? N’est-ce pas ? Avoir une vidéo Youtube en tant que background de votre site Web ? Alors qu’il y a quelques jours je vous présentais Tinycon.js, une librairie Javascript avec laquelle vous allez pouvoir « manipuler » le favicon de votre site Web, aujourd’hui en baladant sur la toile, je suis tombé sur jQuery Tubular.

Tubular est un plugin jQuery créé par Sean McCambridge, un développeur front-end de Chicago aux États-Unis. Ce superbe plugin vous permet de définir une vidéo YouTube en arrière plan (background) de votre site Web ou de votre blog !
Tout ce que vous devez faire est de simplement l’appeler sur votre élément <body> avec l’identifiant de votre vidéo YouTube. L’utilisation nécessite que Javascript et le player Flash soient installés et fonctionnels sur le navigateur du client. En effet, Tubular est dépendant de jQuery et swfobject.

Généralement un background pour un site Web, blog, etc… est une image ou une couleur unie. On peut le comparer au fond d’écran de votre bureau sur votre système d’exploitation. Avec ce plugin, vous allez animer ce dernier ! Idéal pour une ville par exemple. En effet, afficher en time lapse un paysage, ou un quartier peut tout à fait être envisagé. Effet garanti !

Utilisation de base

Pour mettre en œuvre ce plugin dans votre site, tout d’abord vous aurez besoin de télécharger le fichier JS du plugin Tubular sur votre propre serveur ou sur un site d’hébergement de code tels que Google Code, si vous en avez un.

Note : Veuillez noter que le lecteur ne fonctionne pas lorsqu’il est chargé sur votre navigateur depuis votre machine

Maintenant, ajoutez la portion de code suivante avant la fermeture de l’élément </head> dans l’entête de votre thème / page.

[sourcecode language= »Javascript »]
/* Charge la bibliothèque jQuery */
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
/* Charge l’objet SWF */
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
/* Charge le plugin jQuery Tubular */
<script src="js/jquery.tubular.js"></script>
/* Appel de Tubular depuis la balise BODY avec votreYTid est l’ID YouTube et wrapper l’ID de votre conteneur en tant que paramètres. Cet appel doit être effectué au sein de la fonction $(document).ready() */
<script>
$().ready(function() {
$(‘body’).tubular(‘votreYTid’,’wrapper’); //
});
</script>
[/sourcecode]

Remplacez le mot votreYTid dans le code ci-dessus, avec l’identifiant de la vidéo Youtube souhaitée. Vous pourrez obtenir ce dernier à partir de son URL, comme le montre l’image ci-dessous :

jQuery Tubular : Une vidéo en background de votre site Web - Youtube

Enfin, remplacez le terme wrapper avec l’identifiant (id) de l’élément div qui enveloppe le contenu de votre page.

Ça y est ! Enregistrez le fichier, et admirez le résultat… Pour finir, deux petites notes :

jQuery Tubular : Une vidéo en background de votre site Web - Rendu de jQuery Tubular

Note : Tubular va changer la structure de votre CSS. En effet, votre conteneur div aura les caractéristiques suivantes : position: relative; z-index: 99;. La valeur du z-index sera configurable dans les futures versions. Deux éléments div (yt-container et video-cover) seront également créés avec des valeurs de z-index respectivement à 1 et 2. Enfin, une div vide sera au dessus, évitant ainsi les clics accidentels sur Youtube

Note : Il semblerait que le plugin ne fonctionne pas sur un iPad

Démos et téléchargement

Vous pouvez télécharger la démo de l'article dans un seul fichier ZIP.

Conclusion

Il ne vous reste plus qu’à vous rendre sur la page du projet, et trouver une superbe vidéo à placer en fond d’écran.

Venez me partager vos idées, remarques, dans la partie commentaires ci-dessous.

  • http://www.weblife.fr/ Romain Amardeil

    Sympa :-) Faut que ce soit du HD sinon c’est dégueulasse !

    • http://www.blog-nouvelles-technologies.fr Yohann Poiron

      Exact et avoir une bonne BP ;)

  • http://www.benjaminyeurch.com/ Benjamin

    Visuellement c’est sympa même si on perd en lisibilité, par contre quand tu n’as pas beaucoup de débit et que la vidéo gèle régulièrement je ne donne pas cher du taux de rebond…

    • http://www.blog-nouvelles-technologies.fr Yohann Poiron

      C’est sûr…

  • Pingback: jQuery Tubular : Une vidéo en background de votre site Web (Le blog des nouvelles technologies)()

  • http://twitter.com/lackland30 Matt

    Il existe un jquery qui me semble mieux pour un background video « BigVideo.js » on peut utiliser des videos vimeo, youtube ou en local.
    :)