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:
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 "="
- 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:
- Ubica la siguiente sección del código:
undefined<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:
- En este mismo fragmento de código, modifica el URL mimarca.yeira.training por tu propio subdominio en Yeira.
- ¡Listo! Está todo listo para que transmitas tu clase en vivo desde YouTube Live con Chat en tu Curso dentro de tu sitio Yeira.
Actualizado el: 01/07/2020
¡Gracias!