Tout savoir sur WordPress
Tutoriel WordPress

Shortcode pour insérer une vidéo HTML5 dans un article

Cette astuce montre la démarche à suivre pour créer un shortcode qui permet d’insérer une vidéo en HTML5 dans vos articles.

Le HTML5 apporte son lot de nouvelles balises comme la balise <video> qui permet d’ajouter un lecteur vidéo. Si vous utilisez cette balise sur votre site pour insérer vos vidéos, voici un shortcode qui va vous permettre d’intégrer des vidéos HTML5 dans vos articles.

Copiez le code ci-dessous dans le fichier functions.php de votre thème :

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]


add_shortcode('video5', 'gkp_shortcode_html5_video');
function shortcode_html5_video($atts, $content = null) {
    extract(shortcode_atts(array(
	"src"    => '',
	"width"  => '',
	"height" => ''
    ), $atts));

    return '<video width="' . esc_attr( $width) . '" height="' . esc_attr( $height) . '" src="' . esc_attr( $src) . '" controls autobuffer ></video>';
}

[/pastacode]
Pour insérer une vidéo dans un article, vous devez utiliser le shortcode [video5 src=”adresse de votre vidéo” width=”largeur en px” height=”hauteur en px”]

Cet article a été mis à jour il y a 4511 jours - Il n'est peut être plus à jour !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

12 Commentaires

  1. Je suis un pur rédacteur qui a toujours du mal et peu les genoux qui flageolent qd je plonge le nez dans le code. Et la question qui me dérange toujours : où mettre ce foutu code dans le fichier ? Ou on veut ? Avant ou après quelle balise ?

    www;@)

  2. Une balise video complète.
    Là je vois une balise <video> avec un attribut src, donc un seul fichier vidéo sera transmis, donc un seul « conteneur ».
    Aujourd’hui il existe 3 conteneurs vidéos sur le net : .ogv, .mp4 et .webm.
    Lequel de ces 3 est supporté par tous les navigateurs? Aucun.
    La solution est donc d’utiliser une balise qui englobera 3 balises <source> pour que chaque navigateur y trouve ce dont il a besoin.
    De plus, il faut un fallback flash pour IE < 9.

    Allez, comme je suis pointilleux, je note aussi des incohérences dans la notation des attributs. Soit c'est :

    <video controls autobuffer>

    soit :

    <video controls="controls" autobuffer="autobuffer">

    La deuxième étant la meilleure pour des raisons de compatibilité.

    A part ça c’est vrai que des esc_attr et esc_url seraient les bienvenus x)

    A+

  3. Merci pour le partage de ce shortcode. C’est ce que je cherchais il y a quelques temps jusqu’à ce que je trouve un Embed code du style:
    [embed width="600" height="337"]http://www.youtube.com/nom-de-la-vidéo[/embed]
    Est-ce une bonne solution?

  4. Non, WordPress gère lui même les vidéos youtube, il te suffit de coller l’url de youtube dans le contenu et terminé.

  5. Oui merci Julio ;)
    Je savais que si on mettait uniquement l’URL de la vidéo dans l’editeur HTML, WordPress integrait directement la vidéo mais il n’y a pas moyen de centrer la vidéo ni de parametrer sa taille. C’est pourquoi je me suis tourner vers un Embed code. Je me demande juste si c’est la bonne solution concernant l’optimisation de son site et son référencement.

  6. Bonjour,
    Je cherchais une astuce pour insérer 4 vidéos en mp4, ce qui m’a amenée ici. J’étais ravie de trouver enfin votre astuce, car je ne souhaite pas installer un plugin juste pour 4 vidéos. Mais… cela ne fonctionne pas, le code est-il encore valable en ce jour d’oct 2013 ?
    Merci d’avance
    ;-)

  7. Bonjour,

    Petite rectification, le nom de la function et le add shortcode ne correspond pas.
    Changer le gkp_shortcode_html5_video par shortcode_html5_video

    Les tutoriels sont excellents !