Tag

oEmbed

Browsing

Lorsque le site est servi via HTTPS, toutes les ressources – même les ressources oEmbed automatiquement générée par WordPress – qui composent une page doivent également être servies via une connexion chiffrée aussi.

WordPress : afficher des média oEmbed avec HTTPS photo

Il se trouve que je mets des vidéos Youtube et consorts de temps en temps : elles ne s’affichaient plus en https, étant servies par défaut en http.

Le changement vers HTTPS est en marche mais tous les services oEmbed n’ont pas encore adopté le chiffrement des connexions.

Servir les vidéos Youtube en HTTPS

Au lieu d’utiliser Youtube.com, nous allons utiliser la version cookie-less de Youtube, à savoir youtube-nocookie.com : cela permet d’éviter les cookies pisteurs de Google et donc offre plus de sécurité et de respect de la vie privée.

J’utilise ce système depuis des années sur SkyMinds donc je me suis dit qu’il était bien temps de le partager dans ces colonnes.

Le code permet donc de remplacer youtube.com par youtube-nocookie.com dans le code généré par l’oEmbed WordPress.

Ce code est à ajouter dans votre utility plugin (ou à défaut le fichier functions.php de votre thème WordPress).

Le premier code remplace toutes les occurences des médias HTTP pour HTTPS :

<?php
/* Force HTTPS rewrite for oEmbeds
* Source : https://wordpress.stackexchange.com/questions/40747/how-do-i-embed-youtube-videos-with-https-instead-of-http-in-the-url
*/
add_filter( 'embed_oembed_html', 'sky_embed_oembed_html' );
function sky_embed_oembed_html( $html ) { 
  return preg_replace( '@src="https?:@', 'src="', $html );
}

Le second code modifie tous les appels à youtube.com et les remplace par youtube-nocookie.com, ce qui empêche la création de cookies pisteurs :

<?php
//BEGIN Embed Video Fix - HTTPS and privacy mode
//https://wordpress.org/support/topic/forcing-ssl-return-for-youtube-oembed

add_filter('the_content', 'sky_add_secure_video_options', 10);
function sky_add_secure_video_options($html) {
   if (strpos($html, "<iframe" ) !== false) {
    	$search = array('src="http://www.youtube.com','src="http://youtube.com');
	$replace = array('src="https://www.youtube-nocookie.com','src="https://www.youtube-nocookie.com');
	$html = str_replace($search, $replace, $html);
   	return $html;
   } else {
        return $html;
   }
}

Cela a l’air tout bête mais cela permet de faire respecter un peu plus notre droit au refus de se faire pister à tout bout de champs sur le net.

Le petit plus : on charge également moins de cookies, qui ne sont pas des ressources cachables par essence donc on améliore un peu aussi le temps de chargement de la page.

Allez, je continue ma petite série sur la gestion de l’intégration oEmbed sous WordPress.

WordPress gère nativement plusieurs services : copiez-collez l’adresse d’une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide.

oembed-all-service

Je vous propose donc de valider le code généré par WordPress lorsqu’il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare.

Valider le code oEmbed de YouTube

Il suffit de lancer les quatre requêtes SQL suivantes :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");

Valider le code oEmbed de Dailymotion

Pour le code de Dailymotion, ces deux requêtes suffisent :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

Cet article est le pendant de l’article pour remplacer le vieux code YouTube de vos articles WordPress par une URL oEmbed mais pour Dailymotion.

Voici donc les manipulations à effectuer pour transformer les vieux codes d’intégration avec les URL oEmbed de WordPress.

Nous utilisons toujours le plugin Search Regex pour WordPress avec la case regex activée et le signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer les liens swf/video de Dailymotion

J’appelle ces liens “swf/video” parce qu’on retrouve cela dans l’URL de l’intégration Flash. Il vaut mieux lancer cette substitution en premier.

On recherche :

#<object data="http://www.dailymotion.com/swf/video/(.*)" width="300" height="150">(.*)</object>#

et on remplace par :

https://www.dailymotion.com/video/$2

Remplacer les liens swf de Dailymotion

On s’occupe maintenant des liens qui contiennent juste le terme “swf”.

On recherche :

#<object data="http://www.dailymotion.com/swf/(.*)" width="300" height="150">(.*)</object>#

et on remplace par :

https://www.dailymotion.com/video/$2

Voilà, vous venez de nettoyer les anciens codes d’intégration Flash pour les remplacer par des URI oEmbed natives. Propre.

Le code des plateformes – vidéos ou autre – évolue et il n’est pas rare de tomber sur de vieux articles qui embarquent un vieux code embed pour afficher des vidéos.

Si votre site a quelques années, il y a plusieurs méthodes d’intégration – plus ou moins optimisées – dont certaines ne s’afficheront pas (celles utilisant le plugin Flash par exemple) sur une tablette ou un smartphone.

youtubeSur SkyMinds, je me suis dit que ce serait sympa d’avoir un système unifié : toutes les vidéos YouTube seront automatiquement insérées par WordPress en utilisant la méthode native, à savoir oEmbed.

Pour ce faire, j’utilise le plugin Search Regex qui permet d’intervenir facilement sur la base de données pour effectuer des changements en masse, tout en proposant la visualisation des changements avant que ces derniers ne soient appliqués.

Toutes les manipulations sont à effectuer avec Search Regex, en activant la case regex. Je me sers du signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer le vieux code d’intégration flash de YouTube

Avec Search Regex, on cherche :

#(.*)#

Et on remplace par :

https://www.youtube.com/watch?v=$2
Wordpress icon

Pour les besoins du Centre de Kriya Yoga France, j’ai écrit une fonction qui doit afficher une vidéo automatiquement.

Or je voulais juste renvoyer un shortcode vidéo qui prendrait en charge toute la partie code du lecteur vidéo.

On ne peut pas juste renvoyer la valeur, il faut utiliser la fonction do_shortcode() de WordPress.

Cas 1 : exécuter un shortcode dans une fonction

La solution réside dans l’utilisation de la fonction do_shortcode(). Voici un petit exemple :

<?php
/*
|-----------------------------------------------------------------------
| Sky Show Video by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns shortcode to be executed in WordPress.
|
*/
function sky_show_video($content) {
   // do stuff
   // return video
   return do_shortcode("$vid_url");
}

Cet exemple exécute le shortcode .

Le problème : le code des vidéos n’est pas valide en HTML5

Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

<iframe src="https://www.youtube.com/embed/Gvh2Zo7UL6E?fs=1&feature=oembed" width="660" height="371" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Résultat:

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video

Or le petit problème, c’est que tout cela n’est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

Voici donc la solution que j’ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n’a rien à faire là et à supprimer l’attribut frameborder, que je remplace par un style="border: none".

Editez le fichier functions.php de votre thème et ajoutez-y cette fonction:

<?php
/*
|-----------------------------------------------------------------------
| Sky oEmbed Filter by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| The sky_oembed_filter() function attempts to validate WordPress 
| video oEmbeds for HTML5.
| $return is the normal HTML that the oEmbed process would return. 
| $data is the data received from the oEmbed call, in an object format. 
| $url is the original URL being queried for oEmbed info. 
|
*/
add_filter('oembed_dataparse', 'sky_oembed_filter', 90, 3 );
function sky_oembed_filter( $return, $data, $url ) {
 	$return = str_replace('frameborder="0" allowfullscreen', 'style="border: none"', $return);
	return $return;
}

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maitenant être valides.