Des Iframes responsives dans vos articles Wordpress

responsive-video-player.png

Une technique simple, purement basée sur du CSS

Comme beaucoup d'entre nous, lorsque vous ajoutez une vidéo Youtube a vos articles dans Wordpress, la plupart du temps vous souhaitez que les iframes soit responsives.

Vous souhaitez également que votre vidéo garde le bon ratio lorsque l'écran change de taille.

Pour ce faire, nous allons procéder en deux étapes:

  1. Ajouter une règle dans le fichier function.php de votre thème
  2. Ajouter la règle CSS

Modification du fichier functions.php

Dans un premier temps, nous allons ajouter un filtre qui se chargera de placer les iframes des articles, dans une div comportant une classe personnalisé en lieu et place des classiques balises de paragraphe.

                                
                                    // Intégration a un thème classique
function wrap_embed_with_div($html, $url, $attr)
{
    return '<div class="responsive-iframe">' . $html . '</div>';
}

add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

// TIMBER SEULEMENT
// Attention, si vous utilisez le plugin Timber, l'intégration sera probablement un peu différente :
class StarterSite extends Timber\Site
{
    public function __construct()
    {
        // ... some code ...
        add_filter('embed_oembed_html', array($this, 'wrap_embed_with_div'), 10, 3);  
        // ... some code ...
    }

    public function wrap_embed_with_div($html, $url, $attr)
    {
        return '<div class="responsive-iframe">' . $html . '</div>';
    }
}
                                
                            

Ce petit morceau de code va simplement placer vos iframes à l'intérieur d'une div.

Application des règles CSS a vos iframes

Ensuite, ajouter le CSS suivant a votre site :

                                
                                    .responsive-iframe {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 60px;
  margin-bottom: 20px;
  overflow: hidden;
}

.responsive-iframe iframe,
.responsive-iframe object,
.responsive-iframe embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
                                
                            

Vos iframes sont maintenant responsive, tout en gardant le ratio idéal !

Voir également

Vous êtes sur le dernier article en date Voir les articles ou les projets
blog comments powered by Disqus

Licence Creative Commons Cet article est mis à disposition sous Licence Creative Commons Attribution - Partage dans les mêmes Conditions 4.0 International.