Intégrez les videos youtube en HTTPS et sans cookie sur votre blog wordpress

Cookies

Beaucoup de gens l’ignorent (moi-même jusqu’à la semaine dernière…) mais il est possible de consulter Youtube de manière sécurisée et sans se faire suivre par tout un tas de cookies.

Depuis la version 2.9, wordpress gère nativement la découverte oEmbed qui permet aux sites comme youtube, flickr, twitter et bien d’autres de fournir automatiquement le code d’intégration d’une video ou d’une photo à celui qui le demande.

C’est ainsi qu’en collant une URL youtube sur une ligne vide, wordpress est capable d’afficher automatiquement le lecteur flash aux visiteurs. Mais par défaut, il intègre la video depuis http://youtube.com.

Pour plus de confidentialité, j’ai créé un petit plugin (30 lignes, excusez du peu) qui va dire à wordpress de récupérer le code depuis la version sécurisée et confidentielle de youtube: https://www.youtube-nocookie.com. Et bien sûr dans une iframe afin d’être compatible avec les terminaux mobiles.

/*
Plugin Name: Youtube oEmbed NoCookie/SSL
Plugin URI: http://aldarone.fr/
Description: Ce plugin sert à intégrer les videos youtube en utilisant une iframe, le protocole HTTPS et le domaine nocookie de youtube.
Version: 1.0a1
Author: Alda Marteau-Hardi
Author URI: http://aldarone.fr/
License: CC BY-NC-SA
*/

wp_embed_register_handler('youtube_ssl', '#http://(?:www\.youtube\.com\/watch\?v\=|youtu\.be\/)([a-z0-9_-]+)#i', 'wp_embed_handler_youtube_ssl');

function wp_embed_handler_youtube_ssl( $matches, $attr, $url, $rawattr ) {
    // If the user supplied a fixed width AND height, use it
    if ( !empty($rawattr['width']) && !empty($rawattr['height']) ) {
        $width  = (int) $rawattr['width'];
        $height = (int) $rawattr['height'];
    } else {
        list( $width, $height ) = wp_expand_dimensions( 420, 315, $attr['width'], $attr['height'] );
    }
    $embed = sprintf(
                 '',
                 esc_attr($width),
                 esc_attr($height),
                 esc_attr($matches[1])
             );
    return apply_filters('embed_youtube_ssl', $embed, $matches, $attr, $url, $rawattr);
}

Si vous utilisiez cette fonction de wordpress (qui permet d’intégrer la video simplement en copiant l’url dans une nouvelle ligne, ou avec le shortcode ) vous n’avez rien à changer. Une fois le plugin activé vos videos s’afficheront dans une iframe sécurisée et sans cookies. A noter que le plugin gère les attribut « width » et « height » du shortcode et que ça fonctionne aussi avec le domaine raccourci youtu.be.

Trucs à faire :

  • Prendre en compte les options du player passées dans l’URL.
  • Créer une page d’option pour régler certains paramètres par défaut:
    • Choix entre iframe (pour ceux qui tiennent à la compatibilité iPhone) et object (pour ceux qui tiennent aux standards du web)
    • Format du lecteur (4/3, 16/9, 16/10, personnalisé.)
    • Afficher les videos similaires.
    • Masquer les contrôles, seulement la barre de progression, tout afficher.

Mise à jour 1.0.1 (17/11/2011) :

  • Ajout du plugin dans le dépot wordpress (ça facilite les mises à jour et ça apporte un peu de visibilité)
  • Changement du nom du plugin: Youtube Privacy
  • Ajout du panel d’option avec pour l’instant la possibilité de choisir d’utiliser une iframe ou un object. (l’iframe est compatible iPhone et Opera mobile, object est valide en xhtml strict)

Mise à jour 1.0a2 (10/11/2011) :

  • Première mise à jour du plugin, je laisse tomber l’iframe pour utiliser la balise object qui est plus recommandée par les instances supérieures du web. (Du coup ça marche plus sous iPhone, merci Apple.)
  • Les options du player passées dans l’URL sont à présent prises en compte (la liste se trouve ici: YouTube Embedded Player Parameters)
  • Vous pouvez également lancer la lecture directement à un moment donné. Par exemple en rajoutant #t=1m10s la lecture se lancera à 1 minute et 10sec de video.
  • La taille du player passe d’un ratio de 4/3 à 16/9 et les contrôles disparaissent après quelques secondes (et réapparaissent en bougeant la souris bien sûr)

Télécharger le plugin Youtube Privacy (Si vous avez téléchargé une version à partir de cet article, merci de la supprimer et de la réinstaller à partir du dépot wordpress. Sinon pas de mise à jour automatique et sûrement un conflit entre les deux)

  • http://twitter.com/Ohax David Gauvain

    Je vois que mon idée lancée sur Twitter t’as donnée des ailes ! :-P

    C’est intéressant, personne d’autre n’avait pensé à le faire ?

    Par contre tu devrais expliquer comment fonctionne cette fonction (le code oembed à insérer dans WP).

    • http://aldarone.fr/ Aldarone

      J’ai eu beau chercher j’ai pas trouvé de plugin équivalent. La magie du oembed c’est qu’il n’y a pas de syntaxe.

      Tu met ton url youtube toute seule sur une ligne vide et wordpress s’occupe du reste.

      Et si tu veux contrôler individuellement la taille de tes videos tu peux utiliser le tag embed:
      [embed width=* height=*]URL Youtube[/embed]

  • http://twitter.com/Ohax David Gauvain

    Je n’ai pas encore testé, mais à la vue du code ton plugin semble avoir quelques lacunes.

    Pour commencer tu devrais mettre en avant le SSL, avant même le no-cookies dans ton article.

    Ce plugin s’installe en le copiant à la racine du répertoire plugins ? Fichier ou répertoire complet ?
    Tu devrais le référencer sur WordPress quand il sera stable.

    Ensuite d’un point de vue technique, si je poste un lien qui est déjà en https, je ne suis pas certain que ton plugin fonctionne.

    Pour finir si je ne veux pas que les gens sortent du site en cliquant sur les vidéos similaires, comment l’intégrer dans le plugin ?

    • http://aldarone.fr/ Aldarone

      Peut importe, tu peux mettre le répertoire comme le fichier dans le dossier plugins, ça marchera. Je te conseille de mettre tout le dossier étant donnée que les futures mises à jour feront comme ça.

      Concernant les liens en https, effectivement il les prendra pas. Mais tu cliques sur le bouton partage d’une video youtube et que tu copie-colles l’URL ça marche, et pour une première version c’est déjà pas mal.

      De même actuellement il ne gère pas les paramètres comme l’autoplay, le démarrage à un certain moment de la video etc… Il faut encore que j’améliore la regex pour ça :)

      • http://twitter.com/Ohax David Gauvain

        L’autoplay n’est clairement pas souhaitable, son utilisation est lamentable pollution pour n’importe quel site. Après s’il s’agit juste de permettre son utilisation avec une variable oembed pourquoi pas…

        Et pour ma dernière remarque ?

        Je vais tester ton script, je ne te cache pas qu’il m’intéresse clairement, j’espère que ce sera un succès pour toi, puisqu’il répond à une véritable problématique.

        Tu as eu un retour de Korben ?

  • http://twitter.com/Ohax David Gauvain

    Tu compte supprimer la suggestion des vidéos similaires dans la prochaine version ? :-)

    Il ne te reste plus qu’à publier le plugin sur https://wordpress.org/extend/plugins

    • http://twitter.com/Ohax David Gauvain

      Par contre le fait que ton plugin force l’utilisation d’une iframe me laisse perplexe. Tu dit que ça doit améliorer la compatibilité, mais tu as des exemples ? :$

      • http://aldarone.fr/ Aldarone

        Avec le code classique, on charge flash. Si le navigateur n’a pas flash il ne verra pas la video.

        Avec l’iframe, Youtube détermine ce que le navigateur peut afficher: Flash d’abord, mais aussi h.264 ou WebM en HTML5

        Concernant les videos similaires, c’est un paramètre à ajouter à l’URL de la video. Donc tu pourras les bloquer quand j’aurai intégré le support des paramètres (pour l’instant ils sont simplement ignorés)

        • http://twitter.com/Ohax David Gauvain

          En effet, pas bête,

          Pour des raisons d’interpolarité tu va permettre le choix de ce paramètre directement dans l’interface d’admin ?

          En tout cas continue comme ça, je suis vraiment fan du plugin. Dans mon cas il répond à une véritable problématique de respect de la vie privée.

  • Pingback: En bref 18/11/2011 | Aldarone.fr

  • Pingback: En vrac 2 | Ohax.fr

  • http://twitter.com/Ohax Ohax

    Salut Alda, tu plugin est en hibernation ou tu as encore des projets pour celui-ci ?