Rendre les vidéos YouTube et Viméo responsives

Posté par PUShAUNE le 9 janvier 2017

9 commentaires :)

Vous avez intégré une vidéo Youtube ou Viméo sur votre site et malheureusement celle-ci s’affiche mal sur smartphone ? Voilà un tutoriel pour les rendre élastiques et responsives.

Problématique

Quand vous importez une vidéo YouTube ou Viméo, vous devez spécifier une taille qui se retrouve dans le code embed :

<iframe width="960" height="540" src="https://www.youtube.com/embed/I1188GO4p1E?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Pour cet exemple, je vais prendre une vidéo Youtube de 960px par 540px.
Si maintenant je regarde cette vidéo sur un petit écran, elle va sortir du cadre :

Vous pouvez voir que la vidéo calée pour un écran (à gauche) sort du cadre sur un écran de smartphone (à droite).

Solution

La solution consiste à créer un cadre au format 16/9 (.video-container) qui va épouser la forme de son conteneur (en bleu dans mon schéma).
Ensuite, on demandera à la vidéo de se caler parfaitement dans ce container pour pas qu’elle n’en déborde :

Notre div.video-container en format 16/9 est responsive.

Le code

Premièrement, j’englobe mon iframe d’une div nommée .video-container qui aura un ratio 16/9 :

<div class="video-container">
	<iframe width="960" height="540" src="https://www.youtube.com/embed/I1188GO4p1E?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Ensuite, je lui applique ce code en .css :

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* ratio 16/9 */
    height: 0; overflow: hidden;
    clear: both;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Et voilà, votre vidéo est maintenant responsive !

Les ratios

Si votre vidéo a un autre ratio que 16/9, des bandes noires vont apparaitre.
Pour changer le ratio de votre div, il suffit de changer le padding :

.video-container {
    padding-bottom: 75%; /* ratio 4/3 */
}
.video-container {
    padding-bottom: 100%; /* ratio 1/1 */
}
.video-container {
    padding-bottom: 66.66%; /* ratio 3/2 */
}
.container {
    padding-bottom: 62.5%; /* 8/5 Aspect Ratio */
}

Aller plus loin : automatiser le process

Cette solution est toute simple, mais cela peut rapidement être fastidieux de rajouter à la main une div qui englobe toutes vos vidéos, surtout si vous en avez beaucoup sur votre site.
Voilà un bout de code javascript qui va automatiquement créer ces div autour des objets suivants :

  • iframe
  • object
  • embed
$( "iframe" ).wrap( "<div class='video-container'></div>" );
$( "object" ).wrap( "<div class='video-container'></div>" );
$( "embed" ).wrap( "<div class='video-container'></div>" );

Et voilà, maintenant toutes vos vidéos sont responsives !

See ya’ space integrateur

Crédit : Get swifty de Rick et Morty

Summary
Article Name
Rendre les vidéos YouTube et Viméo responsives
Description
Vous avez intégré une vidéo Youtube ou Viméo sur votre site et malheureusement celle-ci s'affiche mal sur smartphone ? Voilà un tutoriel pour les rendre élastiques et responsives.
Nicolas AUNE
Nicolas AUNE
PUShAUNE

Tu kiffes ? Alors partage avec tes potes !

9 commentaires

  1. Le , Tomasz C. a dit :

    Bonjour,
    Je profite de l’article qui tombe bien pour améliorer l’affichage de mes vidéos sur le smartphone. Merci. N’étant pas le spécialiste de Java, une question : où insérer les trois lignes de code de la fin de l’article ? J’essaie de tout en bricolant mon thème enfant… le plugin « Insert headers and footers » ne donne pas de résultats et je me perds via la fonction « enqueue_script ». Je passse un temps considérable pour résoudre l’énigme. J’y arriverai si l’on m’explique… :-) Tout conseil sera le bienvenu !

    • Le , PUShAUNE a dit :

      Bonjour Tomasz,
      Ces 3 lignes sont à insérer dans un fichier javascript (.js). Si tu ne trouves pas le fichier d’initialisation de ton thème (init.js), tu peux toujours les ajouter dans header.php en les englobant dans une balise script.
      C’est pas très propre, mais ça marchera :)

      • Le , Tomasz Cichawa a dit :

        Merci pour ton écho, Pushaune. Puisque ton article me semble précieux car il répond directement à un problème auxquels doivent être confrontés de nombreux webmasters amateurs comme moi. Tu utilises des raccourcis et des sous-entendus que les spécialistes comprendront (mais celles et ceux-là n’ont probablement pas besoin de lire ton article ! :-) )

        Alors, pour des gens de mon espèce (ne sachant coder en JS ni en PHP mais qui — intuitifs et logiques — savent entrer dans le cœur d’un site sur le serveur et changer des trucs, en étant tenus par la main d’un gourou…), je propose un complément d’infos et la question de fin.

        1. Pour info : les codes en .css sont à saisir tout simplement dans l’onglet Apparence/Personnalisation/CSS additionnel de l’espace administrateur de votre WordPress (ma version est 5.4.1). Facile. Ça a de suite marché avec UNE vidéo de mon site.

        2. AUTOMATISER LE PROCESSUS. Oui, ce serait bien, j’ai pas mal de vidéos. Et là tu me proposes les 3 lignes de code en Java. Ça se corse, je n’ai jamais fait, mais j’y vais.

        MÉTHODE 2 (je commence par la plus facile). Tu me dis : « ajouter dans header.php en englobant [ces lignes de code js] dans une balise script ». Alors, je mets ça dans « header.php » de mon thème enfant :

        $( « iframe » ).wrap( «  » );
        $( « object » ).wrap( «  » );
        $( « embed » ).wrap( «  » );

        Ça ne marche pas (j’ai essayé aux plusieurs endroits de la page, dans la zone et pour tester).

        METHODE 1. En effet, je ne trouve pas de fichier « init.js » mais un autre qui me parait convenir : « custom.js ». Je place les 3 lignes de ton code entre deux balises }); Je place le fichier dans le thème enfant. Ça ne marche pas.
        (Il est possible que je ne renseigne des balises qu’il faut, mais là, je manque de lumières.

        Il me reste la METHODE 3 « enqueue_script » dont on parle p.ex. ici : https://www.thibautsoufflet.fr/charger-vos-scripts-javascript-dans-wordpress/, conseillée partout comme la meilleure.
        Alors, ai-je bien fait ? :
        – je crée le fichier videoresp.js (j’y mets tes 3 lignes à l’identique). Je le place dans le dossier « js » de mon thème enfant. Ensuite, dans le fichier fonction.php du thème enfant je colle :
        // enqueue javascript
        function videoresp_js(){
        wp_enqueue_script( ‘videoresp’,
        get_template_directory_uri() . ‘/js/videoresp.js’,
        array() );
        wp_enqueue_script( ‘jquery-mobile-customized-min’,
        get_template_directory_uri() . ‘/js/jquery.mobile.customized.min.js’,
        array() );
        }
        add_action( ‘wp_footer’, ‘videoresp_js’ );

        ÇA NE MARCHE TOUJOURS PAS. Je cale. Ce n’est peut être pas difficile, mais je ne sais plus.
        Pourrais-tu, Pushaune, éventuellement donner la solution avec un pas à pas précis pour automatiser le processus, STP ?
        Autrement, l’étape suivante, sera de saisir des balises
        pour chaque vidéo séparément ! :-(
        Bien à toi.
        Tomasz

        • Le , PUShAUNE a dit :

          Salut !
          La méthode enqueue_script est effectivement la bonne. Je pense qu’elle doit être déjà utilisée dans function.php. Essaye de la trouver, et de n’ajouter que ça :
          wp_register_script( ‘videoresp’, get_template_directory_uri() . ‘/js/videoresp.js’);
          wp_enqueue_script(‘videoresp’);

          • Le , Tomasz Cichawa a dit :

            Merci, Pushaune, pour ton point sur le « i ». Je tâcherai conclure l’opération avec mon deuxième site (en attendant, j’ai « responsivisé » mes vidéos une par une, cela m’a pris moins de temps que d’apprendre le JavaScript… :-) )
            Quoi qu’il en soit, je répète, ton article est précieux et permet de résoudre ce désagréable problème d’adaptation des vidéos à la taille des écrans mobiles.
            Bien à toi.
            Tomasz

  2. Le , Greeneyes a dit :

    Siema Tomek,

    j’ai une question, methode de 100% width et 100% height est chouette pour des mobiles, mais sur mon PC ca fait un gros bloque dans la Description de ma fiche produit Prestashop. Exemple : https://www.millapoignees.fr/poignees-de-porte/533-1840-poignee-interieure-dalia-r-7mm.html

    Le carrée de YouTube est trop balaise. Y a t-il moyen de garder width/height à 100% sur mobile mais diminuer la taille sur PC ? J’aimerais que le carrée soit un peu plus discret. Merci par avance !

    • Le , PUShAUNE a dit :

      Salut,
      Pour avoir un affichage différent selon les devices, j’utiliserais les media queries en CSS.

  3. Le , Pich a dit :

    Bonjour, merci pour ces bons conseils, je reprends la conception complète de mon site et en particulier de la partie responsive. En arrivant sur le site, il y a une vidéo YouTube, courte, un teaser. J’ai donc adopté votre tuto. Partie 1 ça colle, no soucis, par contre dès que j’entre la 2e partie du CSS, la vidéo disparait. Pour m’aider, en général je mets un background-color sur les div histoire de savoir où je suis. En entrant la 2e partie de CSS même le background disparait. Si vous pouviez m’aider ce serait génial. Merci d’avance

    • Le , PUShAUNE a dit :

      Bonjour Pitch,
      Sans avoir accès au code, ça va être difficile de répondre. Si vous voulez, vous pouvez m’envoyer un accès à la préprod par email et je regarde ça :)

Sois pas timide, lâche tes com’ !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.