Comment to 'Play youtube video's in Una.'
  • In case it still doesn't work for you or you prefer some other setting, here's JavaScript you may add where you add your body injections. This is pretty robust and should work without issues.

    <script>
    // This is for YouTube video auto embed
    (function() {
        const youtubeRegex = /^(https?:\/\/(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11}))/gm;
    
    
        function createEmbedHTML(videoId) {
            return `
                <iframe class="ql-video" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen loading="lazy"></iframe>
            `;
        }
    
    
        function isIgnoredElement(node) {
            return node.tagName === 'TEXTAREA' || node.tagName === 'INPUT' || hasAncestorWithClass(node, 'ql-editor');
        }
    
    
        function hasAncestorWithClass(node, className) {
            while (node) {
                if (node.classList && node.classList.contains(className)) {
                    return true;
                }
                node = node.parentNode;
            }
            return false;
        }
    
    
        function processTextNode(node) {
            if (isIgnoredElement(node)) return;
    
    
            const text = node.textContent;
            const fragment = document.createDocumentFragment();
            let lastIndex = 0;
    
    
            text.replace(youtubeRegex, (match, url, videoId, offset) => {
                // Append text before the match
                fragment.appendChild(document.createTextNode(text.slice(lastIndex, offset)));
                // Append the iframe
                const iframe = document.createElement('div');
                iframe.innerHTML = createEmbedHTML(videoId);
                fragment.appendChild(iframe.firstElementChild);
                lastIndex = offset + match.length;
            });
    
    
            // Append remaining text
            if (lastIndex < text.length) {
                fragment.appendChild(document.createTextNode(text.slice(lastIndex)));
            }
    
    
            if (node.parentNode) {
                node.parentNode.replaceChild(fragment, node);
            }
        }
    
    
        function processElementNode(node) {
            if (isIgnoredElement(node)) return;
    
    
            if (node.tagName === 'P') {
                // Process only `p` elements
                Array.from(node.childNodes).forEach(child => processNode(child));
            }
        }
    
    
        function processNode(node) {
            if (node.processed || isIgnoredElement(node)) return;
            node.processed = true;
    
    
            try {
                if (node.nodeType === Node.TEXT_NODE) {
                    processTextNode(node);
                } else if (node.nodeType === Node.ELEMENT_NODE) {
                    processElementNode(node);
                }
            } catch (error) {
                // No need for console error logging
            }
        }
    
    
        function throttle(fn, limit) {
            let lastCall = 0;
            return function(...args) {
                const now = Date.now();
                if (now - lastCall >= limit) {
                    lastCall = now;
                    fn(...args);
                }
            };
        }
    
    
        const processContent = throttle(function() {
            document.querySelectorAll('.bx-db-content p').forEach(p => {
                Array.from(p.childNodes).forEach(child => processNode(child));
            });
        }, 100);
    
    
        const observer = new MutationObserver(mutations => {
            observer.disconnect(); // Temporarily disconnect observer to prevent re-triggering
            mutations.forEach(mutation => {
                mutation.addedNodes.forEach(node => {
                    if (!isIgnoredElement(node) && node.tagName === 'P') {
                        processNode(node);
                    }
                });
            });
            document.querySelectorAll('.bx-db-content').forEach(container => {
                observer.observe(container, { childList: true, subtree: true });
            });
        });
    
    
        document.querySelectorAll('.bx-db-content').forEach(container => {
            observer.observe(container, { childList: true, subtree: true });
        });
    
    
        processContent();
    })();
    </script>
    
    • Also, this might be preferred because when I change from "System" to "oEmbed" my pretty link previews go away. I like those a lot. So, it seems like I need to stick with my embed setting being set to "System." Which means in order to get pretty link previews AND YouTube embeds, you need some workaround like the above JavaScript.