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.

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

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

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

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

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.

Updated on: 06/07/2021