26 Mar 2019

Intégrer une chaîne Twitch à WordPress

Mise à jour de l’article 16/02/2020 : Vidéo tutoriel Youtube en bas de la page !

Vous êtes peut-être un utilisateur de la plateforme de streaming Twitch, un joueur ou tout simplement un passionné et vous avez un site internet WordPress ? Voici comment intégrer facilement Twitch à votre site.

C’est quoi Twitch ?

Certains ne connaissent pas Twitch, c’est pour cela que je vais faire une petite présentation.

Twitch est une solution pour permettre la diffusion en ligne (ou pas) de jeux vidéo, VOD, compétition e-sport. Sur chaque vidéo, un tchat permet l’échange entre le streameur (le créateur du contenu vidéo) et les viewers (les personnes visionnant la vidéo).

L’ogre Amazon a racheté Twitch en 2014 pour 1 milliard de dollars. Vous avez des chiffres très intéressants sur le sujet sur le site du blog du modérateur.

Intégrer Twitch à WordPress

Il existe 2 solutions. Pour les développeurs et les personnes à l’aise avec le code en général, Twitch propose une doc détaillée sur l’intégration du contenu : Voir la documentation.

La première, vous pouvez intégrer directement ce code (de base) dans votre page. Il est aussi possible de le customiser en ajoutant des options dans votre script comme le thème couleur, la lecteur automatique etc…

	<!-- Intégrer Twitch sur son site Matthieu Jalbert -->
    <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "Nom ou Id de la chaîne"
      });
    </script>

La deuxième solution consiste à intégrer l’iframe d’un stream directement sur votre site.

Une fois sur le streameur de votre choix, cliquez sur partager :

Vous avez 2 bouts de code. Un pour le live vidéo et l’autre pour le chat en direct.
Mais il se passe quoi si on met les 2 iframes Twitch à la suite sur WordPress ?

Voici :

Le rendu sur le site n’est pas optimal. Le tchat se retrouve sous la vidéo.

Nous allons optimiser cela, on enlève le lien de la vidéo généré par Twitch et on va coller le deuxième iframe au 1er pour ne pas avoir un saut de ligne HTML entre les 2.
Pour avoir une hauteur identique modifier le height de l’iframe.

Le code ci-dessous est un exemple, à vous d’adapter selon votre site internet ou votre thème WordPress.

<iframe src="https://player.twitch.tv/?channel=sackzitv" frameborder="0" allowfullscreen="true" scrolling="no" height="500" width="720"></iframe><iframe src="https://www.twitch.tv/embed/sackzitv/chat" frameborder="0" scrolling="no" height="500" width="350"></iframe>

Voici le rendu sur mon site exemple :

Il faut savoir que ce tutoriel s’adapte à n’importe quel éditeur de texte ou solution accueillant des iframes. Vous pouvez aussi mettre cela en dur dans votre code HTML.

Le plugin Twitch WordPress

Plus facile que toucher au code (peut-être + lourd pour un site ?), il existe plusieurs plugins si vous utilisez le cms WordPress.

J’ai testé celui-ci : Twitch for WordPress

Alors cependant il est valable que pour afficher une seule chaîne Twitch.
Si vous voulez diffuser plusieurs streams, il faut utiliser un autre plugin ou bien utiliser la technique de l’iframe.

Voilà, à vous de jouer 🙂

8 commentaires sur “Intégrer une chaîne Twitch à WordPress
    1. Il peut y avoir des problèmes sur l’insertion du code.
      L’avez-vous bien mis dans l’onglet texte dans l’éditeur WordPress ? (ou bloc html, il me semble que c’est le nom, avec Gutenberg ?)

      Vous avez testé aussi avec le plugin ?

      Il peut y avoir un blocage avec votre hébergement mais ça m’étonnerait.
      Peut-être aussi qu’il est possible de bloquer l’intégration sur le compte Twitch, il faudrait essayer avec un autre streameur.

      1. Bonjour,

        J’ai bien essayé avec un autre streamer, et même dans le corps d’un article, cela n’a rien changé. J’ai bien repris l’iframe sous le site pour le copier dans le plugin html. Mais rien n’y fait malheureusement.

        Ensuite, avec le plugin, j’ai réussi à l’installer. Mais lorsque je suis en direct, la vidéo ne s’affiche pas. en tout cas pas au bout de 3 minutes et mon statut est encore hors ligne.

        1. Il y a peut-être quelque chose qui bloque sur la config WordPress ou de l’hébergeur.
          Dans ce cas il faudrait regarder le code et chercher pourquoi cela ne fonctionne pas

Laisser un commentaire

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