Insert Videos Based on Type

Preview

Selecting a service type and inserting a video URL will embed the video within the post you create.

This code currently supports the following services:

• Dailymotion

• Facebook

• TikTok

• Twitch

• Vimeo

Change the width and height at the top of the script to your preference.

The width and height variables do not affect TikTok videos.

Admin CP → Themes → Board Templates → Below the board

<script>
const videoWidth = 560;
const videoHeight = 315;
const previewDIV = document.querySelector('.tiptap-toolbar');

if (previewDIV) {
    const insertVideo = document.createElement('button');
    insertVideo.type = 'button';
    insertVideo.id = 'insert-video';
    insertVideo.className = 'btn btn-secondary btn-sm';
    insertVideo.innerText = 'Insert Video';
    previewDIV.appendChild(insertVideo);

    document.querySelector('#insert-video').addEventListener("click", () => {

        if (document.querySelector('#video-container')) {
            document.querySelector('#video-container').remove();
        }

        const videoSelector = `<div id="video-container" class="panel" style="border-width: 1px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)"><div class="panel__sub-header">Insert a Video:</div><div style="padding: 1rem">Video Type:<br><select><option value="-1">Select One</option><option>Dailymotion</option><option>Facebook</option><option>TikTok</option><option>Twitch</option><option>Vimeo</option></select><br><br>Video URL:<br><input type="text"></div><div class="panel__sub-header"><button type="button" class="btn btn-secondary btn-sm submit">Submit</button> <button type="button" class="btn btn-secondary btn-sm cancel">Cancel</button></div></div>`;
        document.body.insertAdjacentHTML('beforeend', videoSelector);

        document.querySelector('#video-container button.cancel').addEventListener("click", () => {
            document.querySelector('#video-container').remove();
        });

        document.querySelector('#video-container button.submit').addEventListener("click", () => {
            const type = document.querySelector('#video-container select').value;
            const video = document.querySelector('#video-container input').value;
            document.querySelector('#video-container').remove();

            if (type !== '-1') {
                document.querySelector('.tiptap-editor p').innerHTML = document.querySelector('.tiptap-editor p').innerHTML + '[VIDEO=' + type + ']' + video + '[/VIDEO]';
            }
        });
    });
}

const content = document.querySelectorAll('div.content');

if (content) {
    content.forEach(post => {
        post.innerHTML = post.innerHTML.replace(/\[VIDEO=(.+?)\](.+?)\[\/VIDEO\]/g, '<span class="video $1">$2</span>');
    });

    const video = document.querySelectorAll('span.video');
    const script = document.createElement('script');
    script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v21.0';
    document.body.appendChild(script);
    const script2 = document.createElement('script');
    script2.src = 'https://www.tiktok.com/embed.js';
    document.body.appendChild(script2);

    video.forEach(html => {
        const vType = html.getAttribute('class').split('video ')[1];
        let vID;

        if (vType === 'Dailymotion') {
            vID = html.innerText.split('/video/')[1];
            html.innerHTML = `<iframe src="https://geo.dailymotion.com/player.html?video=${vID}" style="width:${videoWidth}px; height:${videoHeight}px; overflow:hidden; border:none;" allowfullscreen title="Dailymotion Video Player" allow="web-share"></iframe>`;
        } else if (vType === 'Facebook') {
            vID = html.innerText.split('/videos/')[1].split('/?')[0];
            html.innerHTML = `<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/${vID}/" data-width="${videoWidth}" data-height="${videoHeight}" ata-show-text="false"></div><div id="fb-root"></div>`;
        } else if (vType === 'TikTok') {
            vID = html.innerText.split('/video/')[1].split('?')[0];
            let channel = html.innerText.split('.com/')[1].split('/')[0];
            html.innerHTML = `<blockquote class="tiktok-embed" cite="https://www.tiktok.com/${channel}/video/${vID}" data-video-id="${vID}" data-embed-from="embed_page"><section></section></blockquote>`;
        } else if (vType === 'Twitch') {
            vID = html.innerText.split('/videos/')[1];
            let loc = location.href.split('https://')[1].split('/')[0];
            html.innerHTML = `<iframe src="https://player.twitch.tv/?video=v${vID}&parent=${loc}&autoplay=false" width="${videoWidth}" height="${videoHeight}" allowfullscreen></iframe>`;
        } else if (vType === 'Vimeo') {
            vID = html.innerText.substring(html.innerText.lastIndexOf('/') + 1, html.innerText.length);
            html.innerHTML = `<iframe src="https://player.vimeo.com/video/${vID}" width="${videoWidth}" height="${videoHeight}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
        }
    });
}
</script>