Diffuser un Live de Youtube avec son Chat en simultanée sur son Blog

07 juin 2016 HTML5, VIDEO
Youtube Vidéo social Astuces Broadcast Streaming

Pendant une diffusion en direct sur votre chaîne Youtube, vous pouvez intégrer le chat en direct sur votre site à l'aide d'un iFrame.

Pour intégrer la fenêtre de chat, rien de plus simple.

1. repérer l'ID de la vidéo, elle se trouve dans URL de la vidéo exemple : youtube.com/watch?v=742895wi
2. répérer url où vous allez diffuser le live exemple : www.monsite.com  (pas mettre les http)
3. créer ensuite votre intégration en code HTML voir en bas de ce post
4. attention de ne pas oublier de renseigner dans votre iframe &embed_domain=www.monsite.comsi vous ne le faite pas les commentaires n'apparaitront pas
5. à savoir pour poster des commentaires, il faut disposer d'un compte google.

<iframe src="https://www.youtube.com/embed/DBeZe5h5tNk" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

<iframe src="https://www.youtube.com/live_chat?v=DBeZe5h5tNk&embed_domain=perso.univ-lille3.fr/~rlecerf/" width="560" height="315" frameborder="1"></iframe>

EXEMPLE EN DEMO :

Vous remarquerez que les iframes sont responsives, j'ai utilisé un style CSS : voir l'article : Responsive sur une vidéo VIMEO ou Youtube

En savoir plus sur l'API de Youtube : https://www.youtube.com/yt/dev/fr/

Source du code : http://www.peggyktc.com/2016/05/embed-livestream-and-chat.html