Yes You Web !

Publié le 26 août 2017

Intégrer une vidéo sur son site internet est un moyen efficace pour animer votre site internet et présenter votre entreprise ou vos produits en 1 min. Une vidéo permet également de créer de l’engagement avec vos visiteurs, elles captent davantage l’attention qu’un texte.

Côté technique, ça peut être très simple ou vite devenir un casse-tête selon le mode d’hébergement et d’intégration choisi. Dans cet article, nous allons étudier en détail les différentes options, vous choisirez celle qui convient le mieux à votre problématique.

Intégrer une vidéo hébergée sur une plateforme

La solution la plus simple est d’héberger vos vidéos sur une plateforme dont c’est le métier et d’appeler cette vidéo sur votre site. WordPress possède une super fonction d’auto-intégration, plus besoin de code spécifique, une simple URL suffit.
Cette technique est à la portée de tous et a un second avantage : les vidéos sont hébergées sur la plateforme professionnelle, pas sur votre serveur web, ce qui garantit la vitesse d’affichage de la vidéo, quelle que soit la taille de votre bande passante.

Concrètement, comment faire :

  1. Hébergez votre vidéo sur une plateforme professionnelle comme Youtube, Viméo et DailyMotion pour ne citer que les plus populaires…
  2. Copiez l’URL de votre vidéo, vous la trouvez souvent derrière le lien « Partager » de la plateforme.
  3. Collez l’URL seule dans votre article ou page WordPress.
  4. Et c’est tout…

Yes You Web !

Ce système fonctionne avec toutes les plateformes suivantes : Animoto, Blip, Cloudup, CollegeHumor, DailyMotion, Facebook, Flickr, FunnyOrDie.com, Hulu, Imgur, Instagram, Issuu, Kickstarter, Meetup.com, Mixcloud, Photobucket, PollDaddy, Reddit, ReverbNation, Scribd, SlideShare, SmugMug, SoundCloud, Speaker Deck, Spotify, TED, Tumblr, Twitter, VideoPress, Vimeo, Vine et bien sûr, YouTube.

Intégrer une vidéo hébergée sur votre serveur

Nous ne recommandons par forcément cette méthode, plus gourmande en ressources et plus complexe à mettre en oeuvre mais si vous devez l’utiliser, voilà ce que vous devez savoir.

Tout d’abord, distinguons 2 cas d’usages :

  • Intégrer une vidéo d’arrière-plan : la plupart des thèmes WordPress vous proposent d’intégrer des vidéos d’arrière-plan pour animer un peu votre site.
  • Intégrer manuellement une vidéo de présentation sans passer par une plateforme professionnelle.

Dans les 2 cas, il faut aborder la notion des formats de vidéos afin que votre vidéo s’affiche correctement dans les différents navigateurs et sur les différents types d’écrans (smartphones, tablettes, ordinateurs).

Il n’existe aucune norme universelle donc il va falloir enregistrer / convertir votre vidéo sous différents formats… Les 3 formats recommandés sont :

  • MP4 : MP4 est une extension et un format de conteneur. Le codec vidéo associé est H264, le plus utilisé aujourd’hui.
  • OGG : compatible avec Linux, plus difficilement avec Windows
  • WEBM : codec proposé par Google

Selon les outils qui sont à votre disposition, vous devrez peut-être utiliser un logiciel payant pour faire cette conversion. En outil gratuit, nous vous conseillons Miro Video Coverter, il existe en version Windows Ou Mac.

Intégrer une vidéo d’arrière-plan

Pour intégrer une vidéo d’arrière-plan, le plus simple est de télécharger votre vidéo sur un site spécialisé, payant ou non. Nous utilisons beaucoup le site Coverr.co, qui vous propose une foule de vidéos, que vous pouvez voir en action en cliquant sur « See it as a cover ». Il existe d’autres sites, nous vous laissons faire votre choix.

Avec Coverr, vous obtenez un dossier zippé qui contient la plupart du temps la vidéo en .mp4, en .webm et en .ogg, ainsi q’une image statique.
Il faut ensuite télécharger les vidéos dans votre site WordPress, comme vous le faites d’habitude pour vos images. Avec le thème utilisé pour ce site, Dante, il suffit de copier les URL dans les champs appropriés. De nombreux thèmes récents fonctionnent sur le même modèle.
Si un format ne passe pas dans votre bibliothèque Media, téléchargez votre fichier au bon endroit par FTP.

Yes You Web !

Nous attirons votre attention sur le fait que même optimisée, une vidéo est plus lourde qu’une image donc veillez à ne pas en abuser afin de ne pas nuire aux performances de votre site.

Intégrer directement une vidéo de présentation

A partir de maintenant, les choses se compliquent un peu. Vous l’avez compris, la 1è étape est d’avoir votre vidéo en 3 formats + une image statique.

La 2è étape concerne les lecteurs vidéos. En html5, on a une balise video qui est compatible avec tous les navigateurs qui lisent l’html5… Mais bien sûr, certains navigateurs / OS ne sont pas compatibles donc pour garantir une compatibilité maximale, il faudrait également prévoir un lecteur flash, gratuit ou soumis à licence (FlowPlayer, f4player, DewTube ou DewPlayer).

Nous allons voir le cas le plus fréquent, celui des navigateurs qui comprennent l’html5, la grande majorité aujourd’hui. Vous allez utiliser la balise video que vous allez pouvoir enrichir des attributs suivants :

  • poster : permet d’afficher une image à la place de la vidéo quand elle n’est pas lancée. Par défaut, le navigateur prend la première image de la vidéo mais,
  • comme souvent c’est image noire ou peu représentative, donc il vaut mieux en créer une.
  • controls : permet d’ajouter les boutons « Lecture », « Pause » et la barre de défilement.
  • width : permet de modifier la largeur de la vidéo.
  • height : permet de modifier la hauteur de la vidéo.
  • loop : permet de jouer la vidéo sera jouée en boucle.
  • autoplay : permet de lancer la vidéo dès le chargement de la page. Réfléchissez bien avant de choisir cette option, celà peut être agaçant, surtout avec le son.
  • preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs : auto (par défaut) – le navigateur décide s’il doit précharger toute la vidéo, uniquement les métadonnées ou rien ; metadata : charge uniquement les métadonnées (durée, dimensions, etc.) ; none : pas de préchargement. Cette dernière valeur est utile si vous souhaitez éviter le gaspillage de bande passante sur votre site.

Voici un exemple simple de code :

Copier

A retenir :

  • Les appareils Apple (ipad, imac, iphone) lisent enfin le h264 mais, il faut absolument mettre le format .mp4 en 1ère position
  • On ne peut pas forcer l’affichage en plein écran d’une vidéo
  • On ne peut pas protéger la vidéo de la copie ou du téléchargement

Conclusion

Voilà, l’intégration de vidéos n’a désormais plus aucun secret pour vous. Vous allez pouvoir animer vos sites et augmenter le taux d’engagement de vos visiteurs. Faites quand même bien attention à soigner le fond et la forme de vos vidéos, c’est important. Si jamais vous avez intégré une vidéo via un iframe et que vous avez un soucis de responsive, vous pouvez consulter notre article : Rendre une vidéo Youtube responsive.
Nous espérons que cet article vous aura été utile.
Si vous avez des questions, posez-les en commentaires ci-dessous.
N’hésitez pas à partager vos propres retours d’expérience !