Embedding Videos into Channel and Discussion Banners

Note: To use this feature, you will need to contact Influitive Support and let them know that you would like to enable "Embedded Videos." You will also need to have "Premium Web Branding/Advanced Branding" as part of your Influitive package.

In this article, we will explain how to embed videos into the Banner of a Discussion Topic or Channel. Influitive supports embedding videos from Wistia, YouTube, Vimeo, Vidyard, and GoToMeeting by adding some HTML code to the “Custom Banner” section of your AdvocateHub’s Branding page. Learn more about other Advanced Branding options by reading this article.

Choose the option that applies to you:

• Embedding videos in Discussion Topic Banners
• Embedding videos in Channel Banners

Embedding videos in Discussion Topic Banners

Using a Discussion topic to release your latest video or webinar is made even more appealing with the Embedded Video feature. Videos appear above the Topic, making it the focal point of the page. The Discussion thread appears below so members can provide commentary. If you enable the "sticky" option discussed below, members can scroll through the Discussion Topic thread while watching the video. This is a great option for Q&A during live video streams.

Once the Embedded Videos feature has been enabled you can add video banners to Discussion Topics by adding the following the steps below. 

1

In Admin View, click on the gear icon on the top right of the page.

2

Under the "Advocate Program" menu on the left, click on the "Branding" link.

3

Under the "Advocate Program" menu on the left, click on the "Branding" link. Scroll down to the "Custome Banner" section and find the "HTML" text field (pictured below). There may or may not already be code here. Do not change the existing code; simply add the new code to the bottom of the field.

4

Add your code to the HTML text field. Choose the correct option below based on the video service you are using.

YouTube, Vimeo, and GoToMeeting

<div class="iframe-banner-video" data-video-url="https://www.youtube.com/embed/_MdTQ6mod5g" data-topic-id="13116" data-sticky-video="true"></div>
	

Replace the "data" options in the code above with the relevant options in the table below. 

Data Attribute	Description
data-video-url	Paste the embed video URL from YouTube, GoToMeeting (e.g. https://www.youtube.com/embed/_MdTQ6mod5g).
data-topic-id	ID of the Topic that you want to embed the video in
data-sticky-video	Sticky video setting.  Use “true” if you want the video to stick to the top when you scroll or “false” if you don’t

Wistia

<div class="wistia-banner-video" data-video-uuid="5bbw8l7kl5" data-topic-id="12" data-sticky-video="true" data-options="videoFoam=true playerColor=ff0000"></div>
	

Replace the "data" options in the code above with the relevant options in the table below. 

Data Attribute	Description
data-video-uuid	UUID of the Wistia video that you would like to embed
data-topic-id	ID of the Topic that you want to embed the video in
data-sticky-video	Sticky video setting.  Use “true” if you want the video to stick to the top when you scroll or “false” if you don’t

Take note of the "data-options" portion of the code above. We have some recommended options set for you here. The "videoFoam=true" option allows the video to resize automatically if the surrounding section of the page changes. The "playerColor=ff0000" option sets the colour to red. There are a multitude of other options available for Wistia including the ability to turn on autoplay, hide the control buttons, and choose what happens when a video ends. Read Wistia's documentation to learn more and add any you'd like.

Vidyard 

<div class="vidyard-banner-video" data-video-uuid="imfJH38hhjd" data-topic-id="13116" data-sticky-video="true"></div>
	

Replace the "data" options in the code above with the relevant options below.

Data Attribute	Description
data-video-uuid	UUID of the Vidyard video that you would like to embed
data-topic-id	ID of the Topic that you want to embed the video in
data-sticky-video	Sticky video setting.  Use “true” if you want the video to stick to the top when you scroll or “false” if you don’t

5

After you have pasted and modified the video code, scroll back to the top of the Branding page and click the "Save Changes" button. You should now find the video at the top of the Discussions Topic specified.

Embedding videos in Channel Banners

Using the Embedded Video feature, you can include a video in the banner of a Channel. Learn more about Channels and their purpose in this article.

Once the Embedded Videos feature has been enabled you can add video banners to a Channel's banner by adding the following the steps below. As seen above, the banner is the space between the navigation menu and the Channel content.

Before moving on, you will need to find the ID of the Channel in which the video should be embedded. The ID is the number at the end of a Channel's URL. For example, the ID of the Channel in the below screenshot is 13116 (as highlighted).

1

In Admin View, click on the gear icon on the top right of the page.

2

Under the "Advocate Program" menu on the left, click on the "Branding" link.

3

Under the "Advocate Program" menu on the left, click on the "Branding" link. Scroll down to the "Customer Banner" section and find the "HTML" text field (pictured below). There may or may not already be code here. Do not change the existing code; simply add the new code to the bottom of the field.

4

Add your code to the HTML text field. Choose the correct option below based on the video service you are using.

YouTube, Vimeo, and GoToMeeting

<div class="iframe-banner-video" data-video-url="https://www.youtube.com/embed/_MdTQ6mod5g" data-channel-id="18" data-sticky-video="true"></div>
	

Replace the "data" options in the code above with the relevant options below. 

Data Attribute	Description
data-video-url	Paste the  embed video URL from YouTube, Vimeo or GoToMeeting (e.g. https://www.youtube.com/embed/_MdTQ6mod5g).
data-channel-id	ID of the Channel that you want to embed the video in
data-sticky-video	Sticky video setting.  Use “true” if you want the video to stick to the top when you scroll or “false” if you don’t

Wistia

<div class="wistia-banner-video" data-video-uuid="5bbw8l7kl5" data-topic-id="12" data-sticky-video="true" data-options="videoFoam=true playerColor=ff0000"></div>
	

Replace the "data" options in the code above with the relevant options in the table below. 

Data Attribute	Description
data-video-uuid	UUID of the Wistia video that you would like to embed
data-topic-id	ID of the Topic that you want to embed the video in
data-sticky-video	Sticky video setting.  Use “true” if you want the video to stick to the top when you scroll or “false” if you don’t

Take note of the "data-options" portion of the code above. We have some recommended options set for you here. The "videoFoam=true" option allows the video to resize automatically if the surrounding section of the page changes. The "playerColor=ff0000" option sets the colour to red. There are a multitude of other options available for Wistia including the ability to turn on autoplay, hide the control buttons, and choose what happens when a video ends. Read Wistia's documentation to learn more and add any you'd like.

Vidyard

<div class="vidyard-banner-video" data-video-uuid="igHnkjlkjh37" data-channel-id="18" data-sticky-video="true"></div>
	

Replace the "data" options in the code above with the relevant options below. 

Data Attribute	Description
data-video-uuid	UUID of the Vidyard video that you would like to embed
data-channel-id	ID of the Channel that you want to embed the video in
data-sticky-video	Sticky video setting.  Use “true” if you want the video to stick to the top when you scroll or “false” if you don’t

5

After you have pasted and modified the video code, scroll back to the top of the Branding page and click the "Save Changes" button. You should now find the video at the top of the Channel specified.