L'affichage en surimpression de vos vidéos à la manière d'Apple est possible grâce au plugin Easy FancyBox. Ce tutoriel vous montrera comment appliquer cet effet FancyBox en quelques clics.

Aperçu du résultat

L’effet FancyBox fonctionne sur le même principe de surimpression que l’effet ShadowBox.

Capture d'écran - Effet FancyBox à la Apple
Retrouvez cet FancyBox sur notre page Podcasts vidéos

Utilisation de FancyBox

L’effet FancyBox est compatible avec les types de médias suivants : PDF, SWF, YouTube, Vimeo, Dailymotion, iFrames.

Le principe de fonctionnement est basée sur l’auto-détection des liens. Il n’est donc pas nécessaire de modifier les liens à moins de vouloir gérer l’effet en mode manuel. Reportez-vous à la FAQ du plugin.

Installation

Rendez-vous dans le menu Extensions puis Ajouter. Recherchez le plugin Easy FancyBox puis faites Installer maintenant.

Libre à vous de le télécharger à partir du lien suivant si votre hébergeur n’autorise pas l’installation automatique.

Easy FancyBox

Plugin appliquant un effet FancyBox sur les vidéos de votre blog WordPress. Certifié sans faille de sécurité connue par BoiteAWeb.

Taille : 384,8 Ko  • Hits : 3 960

Options de configuration

Les options du plugin Easy FancyBox sont situées dans Réglages puis Médias, juste en dessous des options de base de WordPress.

Capture d'écran - Options de Easy FancyBox
Libre à vous de personnaliser le plugin à votre convenance
Capture d'écran - Configuration de FancyBox avec YouTube
Les vidéos en provenance de YouTube sont détectées automatiquement

Ces options sont relativement simples à comprendre, je ne vais donc pas les détailler une à une ici.

Toutefois, je vous recommande de :

  • Cocher uniquement les formats qui doivent faire appel à l’effet FancyBox – YouTube dans mon cas, pour alléger le temps de chargement du site ;
  • Limiter les tailles d’affichage concernées à une résolution standard ;

Easy FancyBox propulse la page de podcasts vidéos sur WordPress Channel : un moyen efficace pour afficher des vidéos sans perte de place sur votre site. Cette technique est largement utilisée sur le Web.

Crédits photo : royalconstantinesociety

22 commentaires
  1. Bonsoir, j’aime beaucoup vos podcast !
    J’ai d’ailleurs installer ce plugin avec les mêmes paramètres que les votre.
    Mais impossible de faire fonctionner Easy FancyBox …
    Et je ne sais pas pourquoi, je souhaite l’utiliser seulement pour youtube comme vous.
    Ma config actuelle est WordPress 3.3.1
    et theme Mystique 3.2.9.3

    Merci pour votre réponse.

    1. Aurélien Denis auteur de l’article

      Merci d’apprécier mes podcasts !

      C’est délicat de dépanner sans accès des scripts comme FancyBox, Shadowbox, Ligthbox ou autres. Essayez de repasser avec le thème par défaut pour voir dans un premier temps s’il n’y aurait pas d’incompatibilité.

    2. Jeromeweb78

      Hello,
      J’ai plusieurs fois rencontré une incompatibilité entre easy fancybox et des thèmes achetés chez theme forest.
      « Fancybox » (Par Kevin Sylvestre) est une alternative qui a à chaque fois fonctionné lorsque je rencontrais ce genre de problèmes

  2. bonjour,
    jene comprend pas j’ai un problème avec cette extension et seulement avec les images celle-ci ne s’affiche pas il y a bien le calque gris mais pas l’image or pour les liens YouTube par exemple ou l’iframe sa fonctionne.

    je cherche désespérément de l’aide pour résoudre ce problème donc si vous avez des direction ou je peut chercher je suis preneur.

  3. Bonjour, Très bon podcast ! Peut-être que j’aurai une réponse à mon problème ici … Voilà : j’utilise cette extension formidable, version 1.3.4.9. pour mon site de petites annonces. Seulement je trouve qu’il alourdit considérablement le site, surtout au niveau des scripts, easy-fancybox est actif sur toutes les pages du site, or je ne l’utilise que pour les pages « single » (annonces). alors j’aimerais pouvoir activer cette extension uniquement sur les pages « is_single() » (annonces). Quelqu’un aurait une idée ? Merci !

  4. Bonjour, Très bon podcast ! Peut-être que j’aurai une réponse à mon problème ici … Voilà : j’utilise cette extension formidable, version 1.3.4.9. pour mon site de petites annonces. Seulement je trouve qu’il alourdit considérablement le site, surtout au niveau des scripts, easy-fancybox est actif sur toutes les pages du site, or je ne l’utilise que pour les pages « single » (annonces). alors j’aimerais pouvoir activer cette extension uniquement sur les pages « is_single() » (annonces). Quelqu’un aurait une idée ? Merci !

    1. Aurélien Denis auteur de l’article

      Oui tu peux faire en sorte de limiter l’affichage des scripts sur les pages de ton choix avec des tags conditionnels dans ton function.php.

      Regardes du côté de enqueue_script sur le codex.

      1. Merci Aurélien pour ta réponse… au fait j’ai écrit quelque chose qui a l’air de fonctionner dans le fichier function.php du template :

        add_action(‘wp_head’,’conditional_script’,0);

        function conditional_script() {
        if (!is_single()) {
        remove_action(‘init’,’easy_fancybox_init’);
        remove_action(‘wp_print_styles’, ‘easy_fancybox_enqueue_styles’, 999);
        remove_action(‘wp_enqueue_scripts’, ‘easy_fancybox_enqueue_scripts’, 999);
        remove_action(‘wp_head’, ‘easy_fancybox’, 999);
        }
        }

        Voilà chez moi ça fonctionne correctement

        1. Aurélien Denis auteur de l’article

          Super merci du retour ! Je pense que j’aurais fait quelque chose dans le même genre quoique un peu différemment. Mais l’essentiel est que les requêtes n’apparaissent plus au chargement du site.

          1. En effet ! j’ai fait en fonction de mon site mais je pense qu’on pourrait l’adapter pour tout autre Plugin à neutraliser partiellement dans wordpress… encore bravo pour ton site !

  5. Bonjour,

    Je cherche un plugin qui permet aux articles de s’ouvrir dans le « Fancybox », Tout en sachant que je ne suis pas DEV

    Merci pour les podcasts Aurélien.

  6. Bonjour je n’arrive pas à avoir l’effet de superposition pour les vidéos juste pour les photos (la fenetref java qui vient se superposer à la pages.

    J’obtiens juste la vidéo youtube simple comme sur youtube

    comment il faut faire ?

  7. antoinebeu

    Hello ,

    Plugin Fancybox semble ne pas fonctionner avec l’extension que j’utilise pour mes diaporama (cyclone slider ), existe t il une solution au problème ou bien dois je tester un autre slider ?

    Merci bcp !

  8. Bonjour à tous,
    Je rencontre un problème avec, les liens fonctionnent bien sous Chrome mais pas sous Firefox
    Avez vous une idée?

    merci
    jerome

Laisser un commentaire