STUDIO CENTURIO
Pimp my website : best plugins and scripts

PMW #1 : Youtube plugins

Découvrez chaque semaine un article recensent les meilleurs plugins et scripts pour votre site web !

Découvrez une sélection de ressources web, scripts, plugins et outils CSS pour « tuner votre site » ! Le premier épisode de Pimp My Website est consacré aux plugins Youtube. Bonne customisation !

Youtube Loading Bar

Un petit plugin jQuery qui vous permet d'ajouter une barre de chargement « Youtube-like » à tous vos liens ajax. Nous utilisons subtilement ce script sur les pages de présentation de nos services et réalisations.

Exemple d'initialisation

 $('.ajax-link').loadingbar({
replaceURL : true, // You can visibly change the URL of the browser to reflect the clicked links by toggling this to true
target : '#loadingbar-frame', // The container's selector where you want the ajax result to appear
direction : 'right', // The direction where the the loading bar will progress
});
Script Web : Youtube Loading Bar

Tubular.js

Tubular est un plugin jQuery qui vous permet de définir une vidéo YouTube en tant que fond de page. Pour cela, il vous suffit d'intégrer le plugin à votre site puis de lier le conteneur de votre page à l'ID de votre vidéo Youtube et le tour est joué !

Exemple d'initialisation

 $('#wrapper').tubular({videoId : 'aJTGyyRXDh4'}); // where videoId is the YouTube ID 

Options paramétrables

 ratio            : 16/9, // Usually either 4/3 or 16/9 -- tweak as needed
videoId : 'aJTGyyRXDh4',
mute : true,
repeat : true,
width : $(window).width(), // No need to override
wrapperZIndex : 99,
playButtonClass : 'tubular-play',
pauseButtonClass : 'tubular-pause',
muteButtonClass : 'tubular-mute',
volumeUpClass : 'tubular-volume-up',
volumeDownClass : 'tubular-volume-down',
increaseVolumeBy : 10, // Increment value; volume range is 1-100
start : 0 // Starting position in seconds
Script Web : Youtube Background Video

PreViewTube

Un petit plugin jQuery pour animer les vignettes de vos vidéos YouTube au survole ou en continue. Il est possible d'ajuster la vitesse d'enchaînement des images pour une meilleur fluidité de l'aperçu.

Exemple d'initialisation

 $('.preViewTube').PreViewTube(); 

Options paramétrables

 interval : 500, // The animation rate in ms (default: 500ms)
mode : 'constant' // How the animation should run 'constant' or 'hover' (default : hover)
Script Web : animating YouTube thumbnail images

Youtube autoplay playlist

Lecteur automatique de playlist Youtube, ce plugin jQuery permet également d'appliquer un effet cinéma à vos vidéos en « éteignant la lumière » de votre site ! De nombreuses options et paramètres sont disponibles pour personnaliser l'apparence et le mode de lecture des vidéos.

Exemple d'initialisation

 $('#youtubevideo').youTubePlaylistResponsive({
listtype : 'custom',
listvalue : 'gFftC9O9EZ0,-Fv-iUhLcys,Vv2YXjCWg1A,eIa7YxlHq3A'
});

Options paramétrables

 listtype        : 'search', // Choose between playlist, user_uploads, custom or search (max. 20 video's)
listvalue : 'nature', // Playlist ID, channel name, ID's seperated by comma's (custom) or search for keywords
autoplay : false, // If set to true the player will play onload
showrelated : false, // Show related movies at the end of the movie
showinfo : true, // Display thumbnail images for the videos in the playlist
autohide : false, // Indicates whether the video controls will automatically hide after a video begins playing
theme : false, // Set the color scheme foer the player. true is white ad false is black
modestbranding : true, // Set to false to show the youtube logo in the player controll bar
iv_load_policy : false, // Setting to true will cause video annotations to be shown by default
allowfullscreen : true, // Show the fullscreen button
controls : true, // This parameter indicates whether the video player controls will display
hd : false, // Play the video's in HD at startup
maxwidth : '', // Here you can set the maxwidth in % or px
center : false, // If maxwidth is set you can optional center the player
lightsout : true // Mouseover the video turns out the light effect (background fading)
Script Web : autoplay Youtube playlist

Bonne customisation !

Xzibit West Coast Customs

© Copyright 2015-2019 Studio Centurio