Youtube is a video sharing platform managed by Google. Youtube enables users to upload videos to their account that are viewed by the public. Youtube hosts massive video content and users can reference this content to their sites, blogs or mobile application.

The youtube videos are often displayed in third-party websites for reference or to create an emphasis. For instance, having video tutorials accompanying content on your website for the learners. Usually, to consume the Youtube API, developers need API credentials from the Google developer portal. This type of integration is a little overwhelming for a non-tech-savvy individual. 

To get you off this hook, Olitt includes Youtube integration plugin that is easy to install. You don’t need the API credentials or coding because the plugin handles that for you.

You only need the Youtube Video ID, id for the element to display the video and the dimensions [the desired length and width for the video]. 

Follow the steps below to integrate the service

Step 1: Obtain the video Id.

This is the unique string that Youtube assigns to each video that identifies the channel the video was uploaded to. From the youtube page, search for the video you wish to display.  Select the video for play. The video id is always appended at the end of the URL as shown below.

You can also click on the share button [at the bottom of the video]. You can copy the id from the link as shown below

Step 2: Add id element to display the video

 Open a new tab on your browser and log in to your Olitt account.

Once you log in to your account, select websites to enter “my websites” page. Hover the mouse cursor over the templates and select the edit template.

You can create the HTML div element or use already defined div element in your template. Scroll down and click on the section you wish to display the youtube video. Upon the context menu that pops up, click on the edit icon.

The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document.

https://www.w3schools.com/html/html_id.asp

Add the id on the container element selected above.

Save the changes and return to “my website” page.

Step 3: install the plugin

From the “my website” page, click the more (…) options and select plugins. 

From the list that appears, scroll down and locate “Youtube integration”.  Click on Expand.

Add the id element you created above, the video-id and dimension as shown below.

 You can replace fields with yours.

Click on the “connect” button and now you should be able to see “connected” green text.

Step 4: Verify installation

You can verify the integration by refreshing your website. If you completed the above steps successfully, you should be able to see the youtube preview on a section where you added the youtube_id. Check below.