WordPress : nettoyer les vieux codes YouTube Flash et iframe

Le code des plateformes vidéo évolue régulièrement, et il n’est pas rare de tomber sur de vieux articles WordPress qui embarquent encore un ancien code d’intégration YouTube.

Si votre site a quelques années, il peut contenir plusieurs générations d’intégrations : anciens objets Flash, balises <embed>, iframes, shortcodes, URLs HTTP, URLs /v/, URLs /embed/, ou encore variantes youtube-nocookie.com.

Certaines de ces méthodes ne s’affichent plus correctement, surtout celles qui reposaient sur Flash. D’autres fonctionnent encore, mais elles alourdissent le contenu et compliquent les futures migrations.

Sur SkyMinds, j’ai donc voulu unifier tout cela : les vidéos YouTube doivent être insérées sous forme d’URL propre, puis laissées à WordPress via oEmbed.

Pour Dailymotion, j’ai aussi publié un guide équivalent : mettre à jour le code Dailymotion dans WordPress.

Kinsta: Premium Managed WordPress hosting

Pourquoi utiliser oEmbed pour YouTube dans WordPress ?

WordPress sait intégrer automatiquement certaines URLs de services externes via oEmbed. L’idée est simple : vous collez une URL YouTube seule sur sa ligne, et WordPress se charge de générer le lecteur intégré.

Exemple de contenu idéal :

https://www.youtube.com/watch?v=dQw4w9WgXcQLangage du code : JavaScript (javascript)

Dans l’éditeur, cette URL peut devenir un bloc d’intégration YouTube. Dans le contenu source, elle reste lisible, simple et maintenable.

Les avantages sont nets :

  • le contenu reste propre dans l’éditeur ;
  • on supprime les vieux embeds Flash ;
  • on évite les blocs HTML obsolètes ;
  • on facilite les migrations futures ;
  • on laisse WordPress gérer l’intégration ;
  • on peut filtrer le rendu oEmbed côté thème ou plugin si besoin.

WordPress permet notamment de filtrer les fournisseurs oEmbed via oembed_providers, et sa documentation précise que les fournisseurs autorisés sont considérés comme fiables pour l’intégration de contenus riches.

Avant de commencer : sauvegarder la base

Avant tout remplacement massif, sauvegardez la base de données.

Avec WP-CLI :

wp db export before-youtube-cleanup-$(date +%Y%m%d-%H%M%S).sqlLangage du code : JavaScript (javascript)

Si vous n’utilisez pas WP-CLI, exportez la base depuis phpMyAdmin, Adminer, votre hébergeur, ManageWP, Jetpack Backup ou votre outil de sauvegarde habituel.

Ensuite, travaillez d’abord en prévisualisation. Le plugin Search Regex est pratique pour cela, car il permet de chercher/remplacer avec regex tout en visualisant les changements avant application.

Dans les exemples ci-dessous, j’utilise le signe dièse # comme délimiteur d’expression régulière, avec le drapeau regex activé.

Codeable: trouvez les meilleurs développeurs WordPress

Détecter les anciens codes YouTube

Avant de remplacer, on peut mesurer l’ampleur du chantier.

Avec WP-CLI, cherchez les anciens codes Flash :

wp db query "
SELECT ID, post_title, post_type, post_status
FROM wp_posts
WHERE post_content LIKE '%youtube.com/v/%'
AND post_type IN ('post', 'page')
ORDER BY ID;
"Langage du code : PHP (php)

Cherchez les anciens embeds iframe :

wp db query "
SELECT ID, post_title, post_type, post_status
FROM wp_posts
WHERE post_content LIKE '%youtube.com/embed/%'
AND post_type IN ('post', 'page')
ORDER BY ID;
"Langage du code : PHP (php)

Cherchez les embeds en mode confidentialité renforcée :

wp db query "
SELECT ID, post_title, post_type, post_status
FROM wp_posts
WHERE post_content LIKE '%youtube-nocookie.com/%'
AND post_type IN ('post', 'page')
ORDER BY ID;
"Langage du code : PHP (php)

Si votre préfixe WordPress n’est pas wp_, adaptez le nom de table ou récupérez-le avec :

wp db prefix

Remplacer le vieux code Flash YouTube en <object>

Les vieux embeds YouTube utilisaient souvent une balise <object> avec une URL /v/.

Exemple ancien :

<object width="425" height="344">
  <param name="movie" value="https://www.youtube.com/v/dQw4w9WgXcQ">
  <embed src="https://www.youtube.com/v/dQw4w9WgXcQ" type="application/x-shockwave-flash" width="425" height="344"></embed>
</object>Langage du code : HTML, XML (xml)

Avec Search Regex, on recherche :

#<object[\s\S]*?youtube\.com/v/([^"'\?&/\s]+)[\s\S]*?</object>#iLangage du code : PHP (php)

Et on remplace par :

https://www.youtube.com/watch?v=$1Langage du code : JavaScript (javascript)

Cette regex récupère l’identifiant de la vidéo après /v/, puis remplace tout le bloc <object> par une URL YouTube classique.

Kinsta: Premium Managed WordPress hosting

Remplacer les balises embed YouTube

Certains anciens articles peuvent contenir une balise <embed> seule.

Exemple :

<embed src="https://www.youtube.com/v/dQw4w9WgXcQ" type="application/x-shockwave-flash"></embed>Langage du code : HTML, XML (xml)

On recherche :

#<embed[^>]+src=["']https?://(?:www\.)?youtube\.com/v/([^"'\?&/\s]+)[^"']*["'][^>]*>(?:</embed>)?#iLangage du code : HTML, XML (xml)

Et on remplace par :

https://www.youtube.com/watch?v=$1Langage du code : JavaScript (javascript)

Flash étant mort et enterré, ces vieux <embed> n’ont plus vraiment leur place dans un contenu WordPress moderne.

Remplacer les iframes YouTube classiques

Les iframes YouTube fonctionnent encore, mais dans un contenu WordPress, je préfère souvent les remplacer par une URL oEmbed, plus lisible et plus facile à maintenir.

Exemple d’iframe :

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>Langage du code : HTML, XML (xml)

On recherche :

#<iframe[^>]+src=["']https?://(?:www\.)?youtube\.com/embed/([^"'\?&/\s]+)[^"']*["'][\s\S]*?</iframe>#iLangage du code : HTML, XML (xml)

Et on remplace par :

https://www.youtube.com/watch?v=$1Langage du code : JavaScript (javascript)

YouTube documente toujours l’intégration par iframe, avec des paramètres possibles dans l’URL du lecteur intégré. Mais pour un article WordPress classique, une URL oEmbed est souvent plus simple à maintenir. :contentReference[oaicite:1]{index=1}

WPEngine: Premium Managed WooCommerce hosting

Remplacer les iframes youtube-nocookie.com

YouTube propose aussi un mode de confidentialité renforcée via le domaine youtube-nocookie.com. Pour l’activer dans un iframe, YouTube indique de remplacer le domaine https://www.youtube.com par https://www.youtube-nocookie.com. :contentReference[oaicite:2]{index=2}

Exemple d’iframe no-cookie :

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>Langage du code : HTML, XML (xml)

Si votre objectif est d’unifier tous les contenus en oEmbed WordPress, vous pouvez rechercher :

#<iframe[^>]+src=["']https?://(?:www\.)?youtube-nocookie\.com/embed/([^"'\?&/\s]+)[^"']*["'][\s\S]*?</iframe>#iLangage du code : HTML, XML (xml)

Et remplacer par :

https://www.youtube.com/watch?v=$1Langage du code : JavaScript (javascript)

En revanche, si vous avez volontairement choisi youtube-nocookie.com pour des raisons de confidentialité, ne remplacez pas forcément ces iframes par des URLs YouTube classiques. Dans ce cas, gardez une stratégie dédiée pour forcer le rendu no-cookie dans le code oEmbed.

Conserver le mode youtube-nocookie avec oEmbed

Si vous voulez utiliser oEmbed tout en forçant youtube-nocookie.com, vous pouvez filtrer le HTML renvoyé par WordPress.

Ajoutez ce snippet dans un plugin dédié ou un mu-plugin, pas dans le cœur de WordPress :

<?php
/**
 * Plugin Name: SKY YouTube oEmbed NoCookie
 * Description: Replaces youtube.com embeds with youtube-nocookie.com in WordPress oEmbed output.
 * Author: Matt Biscay
 * Version: 1.0.0
 */

declare(strict_types=1);

defined( 'ABSPATH' ) || exit;

add_filter( 'embed_oembed_html', 'sky_youtube_oembed_use_nocookie_domain', 10, 4 );

/**
 * Use YouTube privacy-enhanced mode for oEmbed iframe output.
 *
 * @param string       $html The returned oEmbed HTML.
 * @param string       $url  The attempted embed URL.
 * @param array|string $attr Optional embed attributes.
 * @param int          $post_id Post ID.
 * @return string Filtered oEmbed HTML.
 */
function sky_youtube_oembed_use_nocookie_domain( string $html, string $url, $attr, int $post_id ): string {
	if ( false === stripos( $html, 'youtube.com/embed/' ) ) {
		return $html;
	}

	return str_replace(
		array(
			'https://www.youtube.com/embed/',
			'https://youtube.com/embed/',
		),
		'https://www.youtube-nocookie.com/embed/',
		$html
	);
}Langage du code : HTML, XML (xml)

Ce filtre garde vos contenus sous forme d’URL YouTube normale, tout en ajustant le HTML final renvoyé par oEmbed. C’est plus maintenable que de stocker des iframes partout dans le contenu.

Attention toutefois : le mode “privacy-enhanced” réduit certains comportements de suivi avant lecture, mais il ne remplace pas une vraie stratégie de consentement si votre contexte légal l’exige. YouTube précise simplement que ce mode passe par le domaine youtube-nocookie.com pour les lecteurs intégrés. :contentReference[oaicite:3]{index=3}

Remplacer les URLs courtes youtu.be

Les URLs courtes YouTube fonctionnent souvent très bien avec WordPress, mais vous pouvez les convertir en URLs longues pour uniformiser le contenu.

Exemple :

https://youtu.be/dQw4w9WgXcQLangage du code : JavaScript (javascript)

On recherche :

#https?://youtu\.be/([^?\s<"]+)#iLangage du code : PHP (php)

On remplace par :

https://www.youtube.com/watch?v=$1Langage du code : JavaScript (javascript)

Ce n’est pas indispensable, mais c’est pratique si vous voulez un format unique dans tous les articles.

Remplacer les anciennes URLs HTTP en HTTPS

Profitez du nettoyage pour remplacer les URLs YouTube en HTTP par HTTPS.

On recherche :

#http://www\.youtube\.com/watch\?v=#iLangage du code : PHP (php)

On remplace par :

https://www.youtube.com/watch?v=Langage du code : JavaScript (javascript)

Et pour les URLs courtes :

#http://youtu\.be/#iLangage du code : PHP (php)

Remplacement :

https://youtu.be/Langage du code : JavaScript (javascript)

Gérer les paramètres YouTube

Les vieux embeds peuvent contenir des paramètres comme rel, autoplay, start, controls ou showinfo.

Exemple :

https://www.youtube.com/embed/dQw4w9WgXcQ?start=42&rel=0Langage du code : JavaScript (javascript)

Les regex précédentes gardent uniquement l’identifiant vidéo. C’est souvent ce que l’on veut pour un nettoyage massif. En revanche, si vous avez beaucoup de vidéos avec un timestamp important, vous pouvez conserver le paramètre start manuellement ou via une regex plus spécifique.

YouTube documente les paramètres disponibles pour les lecteurs intégrés, notamment autoplay, loop et enablejsapi. :contentReference[oaicite:4]{index=4}

Conserver un timestamp YouTube

Si une iframe contient un paramètre start, vous pouvez convertir vers une URL avec timestamp.

Exemple de départ :

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=42"></iframe>Langage du code : HTML, XML (xml)

Résultat souhaité :

https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=42sLangage du code : JavaScript (javascript)

Avec Search Regex, vous pouvez traiter ce cas séparément avant les regex générales.

On recherche :

#<iframe[^>]+src=["']https?://(?:www\.)?youtube\.com/embed/([^"'\?&/\s]+)\?[^"']*start=([0-9]+)[^"']*["'][\s\S]*?</iframe>#iLangage du code : HTML, XML (xml)

On remplace par :

https://www.youtube.com/watch?v=$1&t=$2sLangage du code : JavaScript (javascript)

Lancez cette règle avant la règle générale sur les iframes, sinon le timestamp sera perdu.

Cas Gutenberg : bloc YouTube

Dans Gutenberg, une URL YouTube seule sur sa ligne peut devenir un bloc d’intégration. Le contenu peut ensuite être représenté comme ceci :

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=dQw4w9WgXcQ","type":"video","providerNameSlug":"youtube","responsive":true} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube">
  <div class="wp-block-embed__wrapper">
    https://www.youtube.com/watch?v=dQw4w9WgXcQ
  </div>
</figure>
<!-- /wp:embed -->Langage du code : HTML, XML (xml)

Vous n’êtes pas obligé d’écrire ce markup à la main. Coller l’URL dans l’éditeur suffit généralement.

Script WP-CLI de diagnostic sans modification

Voici un script WP-CLI qui liste les contenus contenant encore des anciens embeds YouTube. Il ne modifie rien.

wp eval '
$query = new WP_Query(
	array(
		"post_type"      => array( "post", "page" ),
		"post_status"    => "any",
		"posts_per_page" => -1,
		"s"              => "youtube",
		"fields"         => "ids",
	)
);

foreach ( $query->posts as $post_id ) {
	$content = get_post_field( "post_content", $post_id );

	if (
		str_contains( $content, "youtube.com/v/" )
		|| str_contains( $content, "youtube.com/embed/" )
		|| str_contains( $content, "youtube-nocookie.com/embed/" )
		|| str_contains( $content, "application/x-shockwave-flash" )
	) {
		printf(
			"#%d %s\n",
			$post_id,
			get_the_title( $post_id )
		);
	}
}
'Langage du code : PHP (php)

Pratique pour savoir combien d’articles il faudra vérifier après nettoyage.

Script WP-CLI de remplacement contrôlé

Si vous préférez un script à Search Regex, voici une version WP-CLI qui remplace les anciens embeds YouTube par des URLs oEmbed. Testez toujours en staging d’abord.

wp eval '
$query = new WP_Query(
	array(
		"post_type"      => array( "post", "page" ),
		"post_status"    => "any",
		"posts_per_page" => -1,
		"s"              => "youtube",
		"fields"         => "ids",
	)
);

$patterns = array(
	"#<object[\s\S]*?youtube\.com/v/([^\"\\\'\?&/\s]+)[\s\S]*?</object>#i",
	"#<embed[^>]+src=[\"\\\']https?://(?:www\.)?youtube\.com/v/([^\"\\\'\?&/\s]+)[^\"\\\']*[\"\\\'][^>]*>(?:</embed>)?#i",
	"#<iframe[^>]+src=[\"\\\']https?://(?:www\.)?youtube\.com/embed/([^\"\\\'\?&/\s]+)[^\"\\\']*[\"\\\'][\s\S]*?</iframe>#i",
	"#<iframe[^>]+src=[\"\\\']https?://(?:www\.)?youtube-nocookie\.com/embed/([^\"\\\'\?&/\s]+)[^\"\\\']*[\"\\\'][\s\S]*?</iframe>#i",
);

$updated = 0;

foreach ( $query->posts as $post_id ) {
	$content = get_post_field( "post_content", $post_id );
	$new     = $content;

	foreach ( $patterns as $pattern ) {
		$new = preg_replace( $pattern, "\nhttps://www.youtube.com/watch?v=$1\n", $new );
	}

	$new = preg_replace(
		"#https?://youtu\.be/([^?\s<\"]+)#i",
		"https://www.youtube.com/watch?v=$1",
		$new
	);

	if ( $new !== $content ) {
		wp_update_post(
			array(
				"ID"           => $post_id,
				"post_content" => $new,
			)
		);

		printf( "Updated #%d %s\n", $post_id, get_the_title( $post_id ) );
		++$updated;
	}
}

printf( "Done. Updated posts: %d\n", $updated );
'Langage du code : PHP (php)

Ce script est volontairement simple. Pour un site avec beaucoup de variantes d’embeds, je préfère d’abord auditer les cas réels, puis affiner les regex.

Vider le cache oEmbed WordPress si nécessaire

WordPress met en cache des résultats oEmbed dans les métadonnées des articles, avec des clés du type _oembed_....

Pour voir quelques entrées :

wp db query "
SELECT post_id, meta_key
FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%'
LIMIT 20;
"Langage du code : PHP (php)

Pour supprimer le cache oEmbed, après sauvegarde :

wp db query "
DELETE FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%';
"Langage du code : PHP (php)

WordPress régénérera les embeds au besoin. Cela peut être utile après une migration massive de vieux codes vers des URLs propres.

Valider le code HTML5 des oEmbeds YouTube

Une fois les anciens codes remplacés, vous pouvez aussi rendre le nouveau code HTML5 de vos oEmbed valide facilement.

L’avantage d’utiliser oEmbed est justement de pouvoir filtrer le code généré par WordPress, plutôt que d’avoir des dizaines d’iframes ou d’anciens objets Flash stockés directement dans les articles.

Vérifier après remplacement

Après nettoyage, vérifiez plusieurs cas :

  • un ancien embed Flash en <object> ;
  • une ancienne balise <embed> ;
  • une iframe YouTube classique ;
  • une iframe youtube-nocookie.com ;
  • une URL courte youtu.be ;
  • une vidéo avec timestamp ;
  • un article sans vidéo, pour vérifier qu’il n’a pas été touché.

Pensez aussi à vider les caches : plugin de cache, cache objet, cache page, Varnish, Cloudflare, ou cache hébergeur.

Pour les sauvegardes et migrations de fichiers, j’ai aussi détaillé une méthode avec Rsync pour rapatrier les fichiers du serveur à la maison.

Mémo rapide

# Sauvegarder la base.
wp db export before-youtube-cleanup-$(date +%Y%m%d-%H%M%S).sql

# Ancien object Flash YouTube.
Recherche :
#<object[\s\S]*?youtube\.com/v/([^"'\?&/\s]+)[\s\S]*?</object>#i

Remplacement :
https://www.youtube.com/watch?v=$1

# Ancienne balise embed.
Recherche :
#<embed[^>]+src=["']https?://(?:www\.)?youtube\.com/v/([^"'\?&/\s]+)[^"']*["'][^>]*>(?:</embed>)?#i

Remplacement :
https://www.youtube.com/watch?v=$1

# Ancienne iframe YouTube.
Recherche :
#<iframe[^>]+src=["']https?://(?:www\.)?youtube\.com/embed/([^"'\?&/\s]+)[^"']*["'][\s\S]*?</iframe>#i

Remplacement :
https://www.youtube.com/watch?v=$1

# Ancienne iframe youtube-nocookie.
Recherche :
#<iframe[^>]+src=["']https?://(?:www\.)?youtube-nocookie\.com/embed/([^"'\?&/\s]+)[^"']*["'][\s\S]*?</iframe>#i

Remplacement :
https://www.youtube.com/watch?v=$1

# URL courte youtu.be.
Recherche :
#https?://youtu\.be/([^?\s<"]+)#i

Remplacement :
https://www.youtube.com/watch?v=$1

# Iframe avec timestamp start.
Recherche :
#<iframe[^>]+src=["']https?://(?:www\.)?youtube\.com/embed/([^"'\?&/\s]+)\?[^"']*start=([0-9]+)[^"']*["'][\s\S]*?</iframe>#i

Remplacement :
https://www.youtube.com/watch?v=$1&t=$2s

# Supprimer le cache oEmbed si nécessaire.
wp db query "
DELETE FROM wp_postmeta
WHERE meta_key LIKE '_oembed_%';
"Langage du code : PHP (php)

Conclusion

Pour moderniser les anciens embeds YouTube dans WordPress, le plus propre consiste à remplacer les vieux blocs Flash, <object>, <embed> et iframes par une URL YouTube simple :

https://www.youtube.com/watch?v=VIDEO_IDLangage du code : JavaScript (javascript)

WordPress peut ensuite gérer l’intégration via oEmbed, ce qui rend le contenu plus lisible et plus facile à maintenir.

Si vous tenez au mode de confidentialité renforcée, gardez vos contenus sous forme d’URL propre, puis filtrez le HTML oEmbed pour remplacer le domaine du lecteur par youtube-nocookie.com.

Comme toujours avec les remplacements massifs : sauvegarde, prévisualisation, test sur quelques articles, puis seulement remplacement global.

Demandez à l'IA son opinion
Gravatar for Matt Biscay

Je suis Matt Biscay, développeur WordPress & WooCommerce certifié chez Codeable, administrateur système et enseignant.

J’aide les entreprises à créer, optimiser et fiabiliser leurs sites WordPress avec une approche technique propre : performance, sécurité, maintenance, développement sur mesure et résolution de problèmes complexes.

Sur Skyminds, je partage des tutoriels WordPress, WooCommerce, Linux et administration système, avec des solutions testées sur des cas réels et pensées pour durer.

Découvrez mes services WordPress et WooCommerce.

1 réflexion au sujet de « WordPress : nettoyer les vieux codes YouTube Flash et iframe »

Laisser un commentaire