How Do I Do A Overlay On Youtube

Developing a Youtube Overlay for Live Streams

Youtube is ane of the largest video platforms on the cyberspace. Information technology contains hours of content ranging from fun videos to educational how-to videos. Much of the content can be integrated into live-streaming sessions, and we will show you how in this tutorial.

Getting Started And Github Repo

To become started, for developers that are new to edifice interactive widgets with BingeWave, please visit this short explainer on the Widget Builder and the process of building interactive solutions:

https://developers.bingewave.com/widgets/gettingstarted

All of our tutorials are accompanied past a Github Repo to assist developers in creating their widgets. To view the repository for this tutorial, please come across here

https://github.com/BingeWave/widget-youtube-overlay-example

HTML

We will outset with the HTML for this tutorial, as it'south the simplest part of this project. For the HTML, we want the user to input a youtube video Url, and nosotros will show a video on-screen based on that URL. The HTML should look equally such:

This code above is a basic form. What is unique about this code is it uses Dynamic Placeholders, which replaces placeholders with existent values when the widget is loaded. Every widget on BingeWave has a namespace, and that namespace is used to foreclose collisions of variables and elements. The namespace can be injected into the HTML using the {{namespace}} placeholder.

To kickoff, all functions defined in the Javascript must be accessed through the namespace; thus, nosotros take this line in our to a higher place code:

          {{namespace}}.displayVideo();        

And prefixing element IDs with namespaces is a best practice for preventing other widgets from naming an element with the aforementioned ID. We have a namespace with an input element divers in our code in a higher place as such:

          <input class="form-command" id="{{namespace}}_youtube_url" value="" />        

And that'southward it! Nosotros are finished with our HTML. Next, we are going to start implementing our Javascript.

Validation and Parsing

This widget should only work with Youtube videos, and it's the developer'due south job to ensure the information being nerveless is right. Nosotros are going to outset with defining some regex that will do ii things:

1. Validate if the URL entered by the user is a Youtube URL.
2. Retrieve the ID of the Youtube video so we tin can apply it in an IFrame.

In our Javascript, implement the following code by placing this line at the very summit of the Javascript editor:

          permit youTubeRegExp = /^.*(youtu.be\/|five\/|u\/\w\/|embed\/|watch\?v=|\&5=|\?five=)([^#\&\?]*).*/;        

Now let'southward add a function that checks if the URL is valid.

We utilized the regex posted above to determine if the URL is the correct format, has the id, and that the ID is valid. Next, we will have a split function that pulls out the id of the youtube video and places information technology an IFrame.

There are a few things to unpack in this office. A Youtube video must be embedded inside an IFrame, and therefore in this function, nosotros first pull out the ID. Later, the IFrame src is constructed past concatenating Youtube's embed URL with the ID. Then we use placeholders again because nosotros want the video to be the full length of the user'southward screen, so we utilise:

          peak="{{screen_height}}" width="{{screen_width}}"        

Using the Dynamic Place Holder, the values will be replaced. With these two of import functions complete, nosotros need to get the user's input and display a video on-screen using an overlay.

Display Video On Screen

This next department volition collect the users' input and display a Youtube video on the screen. First, let's refer back to the HTML, where nosotros created a function to brandish the function.

          <push button class="btn btn-success" onclick="{{namespace}}.displayVideo()">Display Video</button>        

In our Javascript, permit us ascertain the part:

          function displayVideo() {          }        

And then brand the function public. All functions defined in the Javascript editor are private because they are inside the namespace and must be made public past assigning information technology using 'this'.

          this.displayVideo = displayVideo;        

Back to our HTML, we had defined our input as such:

          <input class="grade-control" id="{{namespace}}_youtube_url" value="" />        

We need to get the value the user input when the button is pressed. Inside the displayVideo function, add together the following:

          allow url = document.getElementById(BWProperties.namespace + '_youtube_url').value;        

We are using BWProperties, which has useful information (namespace, consequence id, etc) that is passed into the Javascript editor. Nosotros are going to use the namespace stored in BWProperties concatenated with the rest of the ID to pull the value of the input.

Now, let'due south consummate the displayVideo part:

Nosotros are tying in our isValidYoutubeVideo part defined before to check if the URL is valid, and the createEmbedElement function to create the IFrame that will display video. Next, we need to have the content to announced on-screen to the users.

To display content to a user, refer to the On-Screen Content endpoint divers in the documentation. This endpoint will identify whatsoever content on-screen inside an overlay, and to call it, nosotros will apply the BWAPI object.

          let content = `<div class="text-center">          ${iframe}          </div>          `;          allow params = {content : content, wrap_content : false};          BWAPI.post('/events/' + BWProperties['event_id'] + '/sendOnscreenContent', params);        

A brief review of overlays, in BingeWave they are interactions or letters that announced briefly on-screen to engage with the user.

An essential parameter non to overlook is the wrap_content. If you refer back to the documentation for the On-Screen Content endpoint, you volition meet the selection divers in the docs.

By default, all overlays are wrapped inside a container that controls their appearance and position on-screen. If y'all wish to disable this feature and define your own layout, prepare the wrap_content to false. At this point, your entire Javascript within the widget editor should look like this:

Salvage the changes and start playing around with the code. You will notice a video display on-screen. Aye! But wait, it rapidly goes abroad later virtually twenty seconds. Adjacent, we need to add together some tweaks.

Infinite Overlay and Closing The Overlay

A Youtube video can be any corporeality of time; thus, an overlay that disappears in 20-seconds volition not work for our use case. By referring to the On-Screen Content endpoint, there is an pick for changing the timeout, and setting the value -one will make the overlay appear on-screen forever.

Simply if the overlay is screen forever, how practice we get in disappear? Allow'southward tackle this issue first.

For the UX/UI, we will accept the user be the one who decides when an overlay is closed. Remember this code from our previous footstep:

          let content = `<div grade="text-eye">
${iframe}
</div>
`;        

We are going to modify that code as such:

          let content = `<div class="text-center">
${iframe}
<button class="btn btn-danger" onclick="{{namespace}}.closeLocalVideo('{{overlay_id}}')">
Close
</button>          </div>
`;        

The on-screen overlay volition now accept a button for users to click. The {{overlay_id}} is one of the Dynamic Placeholders that will be replaced with the ID of the electric current overlay. Adjacent, let's add the function to shut the overlay when clicked.

A very simple function that looks for the overlay by its ID, if the overlay exists, then it closes it by removing the element. Finally, remember to make the close office public by calculation this to the Javascript editor:

          this.closeLocalVideo = closeLocalVideo;        

Salve your changes and test to make certain your overlay is endmost. Now to add together the final piece, making the overlay appear on-screen forever until closed by the user. Refer back to our code:

                      let params = {content : content, wrap_content : false};        

We are going to add one parameter every bit such:

          allow params = {content : content, wrap_content : false, timeout: -one};        

Your final Javascript code should look like this:

And that's information technology. The content will now display on-screen until the user clicks close. And that is how you tin can make a basic Youtube widget for displaying Youtube video over your video chat.

Source: https://medium.com/bingewave/developing-a-youtube-overlay-for-live-streams-ed06afc0aea1

Posted by: ruthgairciand.blogspot.com

Share this post