WordPress utilise oEmbed pour afficher automatiquement des contenus via leur player grâce à une simple URL.
Voici la liste des services compatibles
Si vous ne souhaitez pas que les players vidéo et audio soient automatiquement affichés lorsque vous coller un lien dans votre page WordPress, vous pouvez les désactiver en enlevant un filtre.
Il est également possible de définir sur quels éléments activer cet embed automatique pour pousser un peu plus loin la personnalisation de votre thème ou encore pour personnaliser le player youtube.
Nous allons voir dans ce petit tutoriel comment manipuler assez simplement cet outil très pratique.
Gérer auto-embed dans WordPress
Comme vous le savez surement déjà, le contenu est d’un post dans WordPress est appelé via l’action the_content(). Cette action fait appel à de nombreux filtres afin notamment, de convertir les liens de services web en players.
Il nous faut donc supprimer le filtre en question pour ne plus utiliser cette option de formatage.
remove_filter( 'the_content', array( $GLOBALS['wp_embed'], 'autoembed' ), 8 );
Imaginez maintenant que vous ayez un custom field dans lequel vous collez une URL de l’un services supportés, et que vous affichiez ce champs grâce à une action de votre cru.
Vous pouvez faire comme ceci pour appliquer le filtre à cette action :
add_filter( 'media_embed', array( $GLOBALS['wp_embed'], 'autoembed' ), 8 );
Ici, j’ai créé une action media_embed que j’ai placée dans mon loop et qui a pour but d’afficher le custom field qui contient l’URL d’une vidéo youtube par exemple.
Gérer auto-embed dans Buddypress
Pour Buddypress, si vous ne souhaitez plus afficher automatiquement les médias dans les activités et leurs commentaires, il vous suffit de faire comme ceci.
define( 'BP_EMBED_DISABLE_ACTIVITY', true ); define( 'BP_EMBED_DISABLE_ACTIVITY_REPLIES', true );
Ajouter des filtres à l’auto-embed
Pour des raison de structures de pages ou de design, vous pouvez avoir besoin d’insérer vos players dans une div.
Voici donc comment ajouter une div autour de l’embed automatique de WordPress.
add_filter('embed_oembed_html', 'my_embed_oembed_html', 99, 4);
function my_embed_oembed_html($html, $url, $attr, $post_id) {
return '<div class="ma-super-class-parent"><div class="ma-super-class-enfant">' . $html . '</div></div>';
}Personnaliser le player de Youtube
Pour terminer ce petit tutoriel, vous avez sans doute remarqué que Youtube a un player personnalisable.
Attention, on ne parle pas de remplacer le bouton play par une marguerite ou un Dragibus noir (les meilleurs), mais simplement de préciser quelques paramètres dont la couleur du player parmi les 2 disponibles, la taille, etc.
Voici les paramètres du player disponibles
Et voici comment procéder pour ajouter ces paramètres de manière automatisée :
Solution Javascript
La solution jQuery, qui permettra d’ajouter les paramètres sur les vidéos déjà existantes sur votre site.
(function($){$(document).ready(function(){
// Ajout des paramètres via Javascript (jQuery)
$('iframe[src^="http://www.youtube.com"]').each(function() {
var url = $(this).attr("src")
$(this).attr("src",url.substring(0,url.indexOf('?')) + '?rel=0&showinfo=0&theme=light&color=white&hd=1&vq=hd720')
});
})})(jQuery);Solution PHP via Shortcode
La solution php que je préfère, mais qui nécessite de mettre à jour vos contenus si vous avez déjà partagé des vidéos Youtube.
function youtube($atts) {
extract(shortcode_atts(array(
"value" => 'http://',
"width" => '475',
"height" => '350',
"name"=> 'movie',
"allowFullScreen" => 'true',
"allowScriptAccess"=>'always',
), $atts));
return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"></param><param name="allowScriptAccess" value="'.$allowScriptAccess.'"></param><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></embed></object>';
}
add_shortcode("youtube", "youtube");Et voici le shortcode que vous devez utiliser pour que cela fonctionne :
[youtube value="https://www.youtube.com/watch?v=-4ZuZe8rLpw"]
Il faut donc mettre à jour vos contenus existants avec ce shortcode si vous voulez profiter des paramètre youtube sur vos vidéos déjà partagées.
Solution PHP via custom field
Si vous enregistrez le lien de vos vidéos dans un custom field (post meta), vous pouvez également procéder comme suit.
function embed_new_vid($size_w, $size_h){
$url = get_post_meta( get_the_ID(), 'MON_CUSTOM_FIELD', true);
if($url):
//on test si l'url correspond à une vidéo youtube
if ( !strstr($url, 'youtube.com') || !strstr($url, 'youtu.be') ){
$url_string = parse_url($url, PHP_URL_QUERY);
//on parse l'url de la vidéo youtube pour récupérer son ID (le paramètre "v")
parse_str($url_string, $id);
}
if ( isset($id['v']) ) {
print '<div class="movie switch_off"><div class="movie_back"><iframe width="'.$size_w.'" height="'.$size_h.'" src="http://www.youtube.com/embed/'.$id['v'].'?rel=0&showinfo=0&theme=light&color=white&hd=1&vq=hd720" frameborder="0" allowfullscreen></iframe></div></div>';
} else {
//si l'url ne correspond pas à une vidéo youtube, on utilise le shortcode natif de wordpress pour afficher le player correspondant
$shortcode = '[ embed width="'.$size_w.'"]'.$url.'[/embed ]';
global $wp_embed;
echo $wp_embed->run_shortcode($shortcode);
}
endif;
}
Cette fonction a un gros avantage à mon sens, elle vous permet de personnaliser tous les players medias de votre choix, et pas seulement Youtube.
Il suffit d’ajouter un test pour savoir si l’URL que vous avez collée dans le champ de votre post meta contient tel ou tel nom de domaine pour personnaliser la façon dans le media sera affiché grâce aux paramètres du player que vous trouverez à coup sûr sur le site de l’éditeur du service concerné.
Et voici comment appeler cette fonction dans votre thème :
<?php embed_new_vid(940,500); ?>
Si vous voyez d’autre éléments qu’il serait intéressant de traiter dans le cadre de l’auto-embed des médias, n’hésitez pas à m’en faire part en commentaire 😉
