Failed to make youtube embed player for mobile Safari in iOS to autoplay. It doesn't work. Posted here to save others some time...

failed_youtube_mobile_autoplay_test.html

<!---
2021-01-28	
Should load youtube videos automatically on mobile for work page.	
Doesn't work with scripted playback, more on this here:
https://developers.google.com/youtube/iframe_api_reference?hl=tr
-->
<script type="text/javascript">
    var tag = document.createElement('script');
    tag.id = 'iframe-demo';
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    /* Unused, but saved for posterity for detecting mobile devices since 
    the API was removed on modern desktop browsers*/
    function isMobileDevice() {
        /* https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation */
        return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
    }

    function onPlayerReady(event) {
        console.log("Video onPlayerReady event received... will try to mute() and playVideo()")
        event.target.mute();
        setTimeout(function() {
            console.log("Will try to play now this video!")
            event.target.playVideo();
        }, 200);

    }

    (function() {
        var startObserver = function(sqsVideoEl) {
            var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
            if (!MutationObserver) {
                return;
            }

            var getIframeElement = function() {
                /* .sqs-video-wrapper>div>div>iframe */
                return sqsVideoEl.querySelector('div>div>iframe');
            }

            var observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {

                    if (getIframeElement()) {
                        console.log("Video is ready... trying to configure player")
                        observer.disconnect();

                        var player = new YT.Player(getIframeElement(), {
                            events: {
                                'onReady': onPlayerReady
                            }
                        });
                    }
                });
            });

            var isIframeLoaded = function() {
                if (!getIframeElement()) {
                    // console.log(`Iframe is not ready from ${sqsVideoEl.id}`)
                    setTimeout(isIframeLoaded, 1000)
                } else {
                    observer.observe(getIframeElement(), {
                        attributes: true
                    });
                }
            }

            if (!getIframeElement()) {
                // console.log(`Video is not ready from ${sqsVideoEl.id}`)
                isIframeLoaded();
            }
        }
        var init = function() {
            // As there can be multiple background video's on a single page we do this for all of them in a loop. 
            var items = document.getElementsByClassName('sqs-video-wrapper');
            console.log("Items to keep an eye on:")
            console.log(items)
            var items_len = items.length;
            for (var i = 0; i <
                items_len; i++) {
                var el = items[i];
                console.log(`Will start observer for element ${el}`)
                startObserver(el);
            }
        }
        try {
            init();
        } catch (err) {
            if (console && console.error) {
                console.error('Error while trying to load fallback images by default (manual code injection script in Settings > Advanced):', err);
            }
        }
    })()
</script>