Xenforo Forums Example

[Step 1] Attach this script at the top of the 'PAGE_CONTAINER' template, then add saint2.su media site bbcode (Check step [2])

        
           <script type="text/javascript">

                //change this class name, depending on your xenforo style 
                //(it's the parent container of the action buttons on every thread reply)
                var d1 = document.getElementsByClassName('formButtonGroup-extra');
                var frame = null;
                window.onload = function(e){ 
                    if (d1.length > 0) {
                        d1[0].insertAdjacentHTML('beforeend', '<div class="formButtonGroup"><button onclick="prepareFrame()" type="button" tabindex="-1" role="button" title="Upload videos" class="button--link js-attachmentUpload button button--icon button--icon--upload fa--xf rippleButton"><span class="button-text">Upload videos</span></button></div>');

                    }
                }
                function splashOpen(url)
                {
                    var winFeatures = 'screenX=0,screenY=0,top=0,left=0,scrollbars,width=100,height=100';
                    var winName = 'window';
                    var win = window.open(url,winName, winFeatures); 
                    //var extraWidth = win.screen.availWidth - win.outerWidth;
                    //var extraHeight = win.screen.availHeight - win.outerHeight;
                    var extraWidth = 400;
                    var extraHeight = 600;
                    win.resizeBy(extraWidth, extraHeight);
                    return win;
                }

                function prepareFrame() {
                    var win = splashOpen('//saint2.su/upload/api');  
                    win.postMessage('preparing', 'https://saint2.su/');
                    frame = win;
                }

                //event.data is the uploaded video's ID 
                //note: saint_vid is just a placeholder id, yours can differ, so just adjust it, but keep the same template as we've shown below this code block
                window.addEventListener('message', event => {
                    if (event.origin.startsWith('https://saint2.su')) { 
                        //console.log("[DEBUG] saint2.su callback: "+event.data); 
                        if(event.data.indexOf("close") !== -1){
                            frame.close();
                            return;
                        }

                        var c1 = document.getElementsByClassName('fr-element');
                        if (c1.length > 0) {
                            var x1 = document.getElementsByClassName('fr-wrapper');
                            if(x1.length > 0){
                                if(x1[0].style.display == "none"){
                                    console.log('[DEBUG]: bb code mode');
                                    var boxes = document.querySelectorAll('[aria-label="Rich text box"]');
                                    if(boxes.length > 0){
                                        var data = "[MEDIA=saint_vid]"+event.data+"[/MEDIA]";
                                        boxes[0].value = boxes[0].value+data;
                                    }
                                }else{		
                                    var data = "<p>[MEDIA=saint_vid]"+event.data+"[/MEDIA]</p>";
                                    c1[0].insertAdjacentHTML('beforeend', data);
                                }
                            }
                        }
                    } else {
                        return; 
                    } 
                }); 

            </script>
        
    

Xenforo Embed Media BB Code

[Step 2] Go to your ACP -> content -> bb code media sites and add this template below

        
           Site title = saint2.su
           Site URL   = https://saint2.su
           Match URLs = https://saint2.su/embed/{$id}
           Embed template: 

           <div class="generic2wide-iframe-div">
                <iframe class="saint-iframe" src="https://saint2.su/embed/{$id}"  height="auto" width="auto" style="border:none;" loading="lazy" allow="fullscreen;"></iframe>
            </div>
        
    

other use cases

For now we've only added partial support for Xenforo. You can guide yourself with the script that we have above and add support to your own sites.
The above JS code will probably work for most use cases. You still might need to change css classes and maybe remove the BB Code response and just directly insert an iframe with the video link (which we've shown how it looks in the bb code example).