Announcement

Collapse
No announcement yet.

Twitch BBCode

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free Twitch BBCode

    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)
    HTML Code:
    <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:
    Click image for larger version  Name:	twitch.png Views:	0 Size:	278.2 KB ID:	24488

    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:

    Code:
    [twitch]MyClip-UlQu2NyjJ1pbfKGa[/twitch]
    Last edited by glennrocksvb; 08-08-2022, 05:45 PM. Reason: Updated code to support Channel and Clips
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    Originally posted by glennrocksvb View Post
    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)
    HTML Code:
    <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:
    Click image for larger version Name:	twitch.png Views:	0 Size:	278.2 KB ID:	24488
    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?

    Comment


      #3
      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.
      The Linux Community has given me much. I do what I can to return the favor!

      Comment


        #4
        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.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          Originally posted by glennrocksvb View Post
          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:
          Click image for larger version

Name:	Screen Shot 2022-08-07 at 12.00.13 PM.png
Views:	39
Size:	86.5 KB
ID:	25304

          This is the Replacement code I'm using:
          Code:
          <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>
          The Linux Community has given me much. I do what I can to return the favor!

          Comment


            #6
            Remove the https and www in the parent parameter. It's supposed to be just the domain name which kubuntuforums.net in your case.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              Originally posted by glennrocksvb View Post
              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>

              Comment


                #8
                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.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #9
                  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

                  Comment


                    #10
                    Try including www in the domain name:
                    www.pctechforum.net
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #11
                      Originally posted by glennrocksvb View Post
                      Try including www in the domain name:
                      www.pctechforum.net
                      YESS!!! It works. Thank alot Glen.

                      Comment


                        #12
                        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.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                          #13
                          Originally posted by glennrocksvb View Post
                          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?

                          Comment


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

                            HTML Code:
                            <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>
                            Helpful? Donate. Thanks!
                            Buy me a coffeePayPal QR Code
                            Fast VPS Host for vBulletin:
                            A2 Hosting & IONOS

                            Comment


                              #15
                              Originally posted by glennrocksvb View Post
                              Maybe those are channels? You need a new BBCode tag for Twitch Channels because the embed URL is different. The Replacement code will be:

                              HTML Code:
                              <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!

                              Comment


                              • glennrocksvb
                                glennrocksvb commented
                                Editing a comment
                                Awesome! Thanks for confirmation.

                            Latest Topics

                            Collapse

                            Working...
                            X