YouTube Live integration with Chat

If you want to broadcast your class live, you can do it through your YouTube account with the YouTube Live option and integrate it into your Course on your Yeira site. Check out this tutorial to view how to do it. But, if you additionally want to integrate the Chat that YouTube Live provides to interact with your Users, you can do it from the HTML5 Embed Resource with Embed.

Steps to insert a Chat in your YouTube Live in Yeira

Step 1: Create an HTML5 Embed Resource

Go to Login> Courses> Course> Edit> Content> Course Content
Create a New Topic or open one that you have already created to insert the HTML5 resource.
Click on the "orange circle" icon. The Topic Resources available within the Course Topic will open.
Click on the "New HTML5" icon. An Edit window will open.
Add the Name of the Resource that you want to appear, it will be visible to your users.
You will see two tabs "ZIP" and "Embed". Click on "Embed" to move to the code insertion space.

Step 2: Copy and paste the code

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

Copy and paste the following embed code inside the black box:

<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=mysite.yeira.training"></iframe>
</div>

Step 3: Customize the code

Locate within the code that you pasted the following fragment:

<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>

From the URL of the Live Stream Video, copy the ID found in the YouTube long URL at the end of the "=" sign.

Example: https://www.youtube.com/watch?v= YDxvizjBrl4

In the code snippet you located, replace with your own YouTube Video ID the corresponding section that follows right after the embed section from the YouTube link, like the following example:

Original template: https://www.youtube.com/embed/ gVH6WvzwGeM ?autoplay=1
Modified template: https://www.youtube.com/embed/ YDxvizjBrl4 ?autoplay=1

Locate the following section of code:

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

In the code snippet you located, replace with your own YouTube Video ID the corresponding section that follows right after the embed section from the YouTube link, like the following example:

Original template: https://www.youtube.com/live_chat?v= gVH6WvzwGeM &embed_domain=mysite.yeira.training
Modified template: https://www.youtube.com/live_chat?v= YDxvizjBrl4 &embed_domain=mysite.yeira.training

In this same code snippet, replace the URL my mysite.yeira.training with your own Yeira subdomain.

Original template: https://www.youtube.com/live_chat?v= gVH6WvzwGeM &embed_domain= mysite.yeira.training
Modified template: https://www.youtube.com/live_chat?v= gVH6WvzwGeM &embed_domain= mycourses.yeira.training

Ready! Everything is ready for you to broadcast your class from YouTube Live with Chat in your Course within your Yeira site .



Be careful to modify exclusively what is marked in orange, do not delete other parts of the source code.
If you don't see the Chat, check if the following characters were copied in your code when pasting your Domain: https://, if so, just delete them.

You don't have an account in Yeira yet? Get your free account here.

Updated on: 06/07/2021