Official - Free Twitch BBCode

[glennrocksvb]

Here's how to create a BB Code to embed Twitch videos.

Go to AdminCP > Custom BB Codes > Add New BB Code and enter the following information:

Title: Twitch
BB Code Tag Name: twitch
Replacement: (Replace www.yourdomain.com with your actual forum domain name. Include or exclude www depending on how the Base URL is configured in AdminCP. Twitch requires you to pass the domain of the parent page the Twitch video is embedded on)

<iframe onload="var domain='www.yourdomain.com';this.src='{param}'.includes('-')?`https://clips.twitch.tv/embed?clip={param}&parent=${domain}`:`https://player.twitch.tv/?${Number('{param}')>0?'video':'channel'}={param}&parent=${domain}`; this.onload=null;" src="" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620" style="max-width:100%;"></iframe>

Example: [twitch]TwitchVideoIDHere[/twitch]
Use {option}: No
Button Image (Optional): (specify image path if you want a new button for this BBCode to appear in the editor)
Rest of Options: Yes

Note: Ignore the malformed HTML warning when saving. I think this is a vB bug.

Example:
[twitch]1433394436[/twitch]

Output:


You can also use Video ID, Channel/Username, or Clip ID inside the Twitch BBCode tag.

To add clips, you need to add all characters after "/clip/" in the Clip URL and before "?" if it exists. For example, if the Twitch Clip URL is https://www.twitch.tv/myusername/clip/MyClip-UlQu2NyjJ1pbfKGa, the BBCode tag would look like this:

[twitch]MyClip-UlQu2NyjJ1pbfKGa[/twitch]

[DOSO]

Here's how to create a BB Code to embed Twitch videos.

Go to AdminCP > Custom BB Codes > Add New BB Code and enter the following information:

Title: Twitch
BB Code Tag Name: twitch
Replacement: (Replace yourdomain.com with your actual forum domain name. Twitch requires you to pass the domain of the parent page the Twitch video is embedded on)

<iframe src="https://player.twitch.tv/?video={param}&parent=yourdomain.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620" style="max-width:100%;"></iframe>

Example: [twitch]TwitchVideoIDHere[/twitch]
Use {option}: No
Button Image (Optional): (specify image path if you want a new button for this BBCode to appear in the editor)
Rest of Options: Yes


Example:
[twitch]1433394436[/twitch]

Output:

Hello Glen. I am trying to get the code that you posted to work. However, it keeps saying that I have to enclose all HTML in between quotes, and it points to the {param} element.

Here goes an example:

The following BB Code replacement may not be properly formed. All HTML attributes should be enclosed within double quotes. <iframe src="https://player.twitch.tv/?video={param}&parent=https://www.pctechforum.net" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620" style="max-width:100%;"></iframe>

What should I do to get it to work?

[Snowhog]

I too, am getting the "BB Code replacement may not be properly formed." message when saving the new entry. Something in your HTML Code isn't correct.

[glennrocksvb]

I think that's a vB bug as all HTML attributes are clearly enclosed within double quotes. Try ignoring the error and saving it anyway.

[Snowhog]

Try ignoring the error and saving it anyway.

Did that, and then tested the BBCode. It didn't work. This is the resulting error screen:


This is the Replacement code I'm using:

<iframe src="https://player.twitch.tv/?video={param}&parent=https://www.kubuntuforums.net" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620" style="max-width:100%;"></iframe>

[glennrocksvb]

Remove the https and www in the parent parameter. It's supposed to be just the domain name which kubuntuforums.net in your case.

[DOSO]

Remove the https and www in the parent parameter. It's supposed to be just the domain name which kubuntuforums.net in your case.

Hello Glen, I got rid of the www and https, and it still give me an error saying the embed is misconfigured. I got a broken screen icon with a sad face.

This is the code that I used:

<iframe src="https://player.twitch.tv/?video={param}&parent=pctechforum.net" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620" style="max-width:100%;"></iframe>

[glennrocksvb]

I'm not at home but did you use just video id in the bbcode tag when using in the post?

Check for the detailed error in the Console tab. Press F12 to open the DevTools and then open Console tab.

[DOSO]

This is the errors that I got from hitting inspect.

Refused to frame 'https://player.twitch.tv/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://pctechforum.net".

(index):6773 crbug/1173575, non-JS module files deprecated.
(anonymous) @ (index):6773
DevTools failed to load source map: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND
DevTools failed to load source map: Could not load content for chrome-extension://pgjjikdiikihdfpoppgaidccahalehjh/webspeed.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/content_scroll_mid_detection.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_check.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fheoggkfdfchfphceeifdbepaooicaho/sourceMap/chrome/scripts/iframe_form_detection.map: System error: net::ERR_BLOCKED_BY_CLIENT

[glennrocksvb]

Try including www in the domain name:
www.pctechforum.net

[DOSO]

Try including www in the domain name:
www.pctechforum.net

YESS!!! It works. Thank alot Glen.

[glennrocksvb]

Glad to help.

So basically the domain in the parent parameter should include www if it's included in the base URL defined in AdminCP.

[DOSO]

Glad to help.

So basically the domain in the parent parameter should include www if it's included in the base URL defined in AdminCP.

One thing about the twitch, I notice that a lot of twitch videos don't have a number to them. What can I do if the twitch video doesn't have a number? E.G. [twitch]1433394436[/twitch] . Alot of twitch videos don't have a number to them. How do I embed the videos that don't have a number?

[glennrocksvb]

Maybe those are channels? You need a new BBCode tag for Twitch Channels because the embed URL is different. The Replacement code will be:

<iframe src="https://player.twitch.tv/?channel={param}&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620" style="max-width:100%;"></iframe>

[DOSO]

Maybe those are channels? You need a new BBCode tag for Twitch Channels because the embed URL is different. The Replacement code will be:

<iframe src="https://player.twitch.tv/?channel={param}&parent=www.example.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620" style="max-width:100%;"></iframe>

Yesss! It works!

[glennrocksvb]

Awesome! Thanks for confirmation.