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&embed_domain=miempresa.yeira.training"></iframe>
</div>Paso 3: Personaliza el código
Ubica dentro del código que pegaste el siguiente fragmento:
<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=1
Código modificado ejemplo: https://www.youtube.com/embed/ YDxvizjBrl4 ?autoplay=1
Ubica la siguiente sección del código:
<iframe width="560" height="315" src="https://www.youtube.com/live_chat?v=gVH6WvzwGeM&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 &embed_domain=mimarca.yeira.training
Código modificado ejemplo: https://www.youtube.com/live_chat?v= YDxvizjBrl4 &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 &embed_domain= mimarca.yeira.training
Código modificado ejemplo: https://www.youtube.com/live_chat?v= gVH6WvzwGeM &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.
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
¡Gracias!