Artículos sobre: Videos en YouTube y Vimeo

Integración de YouTube Live con chat


Integración de YouTube Live con Chat


Si quieres hacer una transmisión de tu clase en vivo, podrás realizarla a través de tu cuenta de YouTube con la opción YouTube Live e integrarla a tu Curso en tu sitio Yeira. Consulta este tutorial para saber cómo hacerlo. Pero, si adicionalmente quieres integrar el Chat que proporciona YouTube Live para interactuar con tus Usuarios, puedes hacerlo desde el Recurso tipo HTML5 con Embed.



Pasos para incorporar YouTube Live con Chat en Yeira



Paso 1: Crea un Recurso tipo HTML5 con Embed


  • Ve a Iniciar sesión > Cursos > Curso > Editar > Contenido > Contenido del Curso
  • Crea un Nuevo Tema o abre uno que ya hayas creado para insertar el recurso tipo HTML5.
  • Pulsa sobre el ícono "circular color naranja". Se abrirán los Recursos del Tema disponibles dentro del Tema del Curso.
  • Pulsa en el ícono de "Nuevo HTML5". Se abrirá una ventana de Edición.
  • Agrega el Nombre del Recurso que quieras que aparezca, éste será visible para tus usuarios.
  • Verás dos pestañas "ZIP" y "Embed". Pulsa en "Embed" para moverte al espacio de inserción de código.


Paso 2: Copia y pega el código


  • Copia y pega el siguiente código de inserción dentro del recuadro negro:



<style>

.videoContainer {

position: absolute;

width: 75%;

height: 100%;

top: 0;

left: 0;

bottom: 0;

right: 0;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}


.videoContainerChat {

position: absolute;

width: 25%;

height: 100%;

top: 0;

right: 0;

bottom: 0;

right: 0;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

border: 0 !important;

}


iframe {

/* optional */

width: 100%;

height: 100%;

border: 0 !important;

}

</style>

<div class='videoContainer'><iframe width="560" height="315" src="https://www.youtube.com/embed/gVH6WvzwGeM?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

<div class='videoContainerChat'>

<iframe width="560" height="315" src="https://www.youtube.com/live_chat?v=gVH6WvzwGeM&amp;embed_domain=miempresa.yeira.training"></iframe>

</div>



Paso 3: Personaliza el código


  • Ubica dentro del código que pegaste el siguiente fragmento:


undefined<div class='videoContainer'><iframe width="560" height="315" src="https://www.youtube.com/embed/gVH6WvzwGeM?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>


  • Del URL del Video de la transmisión en vivo, copia el ID que se encuentra en el URL largo de YouTube al final del signo "="


Ejemplo: https://www.youtube.com/watch?v= __YDxvizjBrl4__


  • En el fragmento de código que ubicaste, modifica exclusivamente la siguiente información marcada en naranja del enlace de YouTube con tu propio ID de tu Video de YouTube:


Código dice: https://www.youtube.com/embed/ __gVH6WvzwGeM __?autoplay=1Código modificado ejemplo: https://www.youtube.com/embed/ __YDxvizjBrl4 __?autoplay=1


  • Ubica la siguiente sección del código:


undefined<iframe width="560" height="315" src="https://www.youtube.com/live_chat?v=gVH6WvzwGeM&amp;embed_domain=mimarca.yeira.training"></iframe>


  • Modifica exclusivamente la siguiente información marcada en naranja del enlace de YouTube con tu propio ID de tu Video de YouTube:


Código dice: https://www.youtube.com/live_chat?v= __gVH6WvzwGeM &amp;embed_domain=mimarca.yeira.training__Código modificado ejemplo: https://www.youtube.com/live_chat?v= __YDxvizjBrl4 &amp;embed_domain=mimarca.yeira.training__


  • En este mismo fragmento de código, modifica el URL mimarca.yeira.training por tu propio subdominio en Yeira.


Codigo dice: https://www.youtube.com/live_chat?v= __gVH6WvzwGeM &amp;embed_domain= mimarca.yeira.training__Código modificado ejemplo: https://www.youtube.com/live_chat?v= __gVH6WvzwGeM &amp;embed_domain= miscursos.yeira.training__


  • ¡Listo! Está todo listo para que transmitas tu clase en vivo desde YouTube Live con Chat en tu Curso dentro de tu sitio Yeira.




YouTube Live con Chat en tu Curso en tu sitio Yeira



Ten cuidado de modificar exclusivamente lo marcado en naranja, no elimines otros pedazos de código.Si no visualizas el Chat, revisa si en tu código a la hora de pegar tu Dominio se copiaron los siguientes caracteres: https://, si es así, sólo bórralos.

Actualizado el: 01/07/2020

¿Este artículo te resultó útil?

Comparte tu opinión

Cancelar

¡Gracias!