Doug Smith
Doug Smith

Reputation: 29326

Why will my embedded YouTube player not play automatically?

I'm trying the following code on iOS in a UIWebView to embed a YouTube video:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                margin: 0;
                padding: 0;
            }

            body, html {
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <iframe id="player" type="text/html" width="100%" height="100%" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"></iframe>
        <script>
            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

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

            function onPlayerReady(event) {
                event.target.playVideo();
            }
        </script>
    </body>
</html>

I'm using the following Swift code to accomplish it:

let html = "<!DOCTYPE html><html><head><style type=\"text/css\"> body { margin: 0; padding: 0; } body, html { height: 100%; width: 100%; } </style> </head> <body> <iframe id=\"player\" type=\"text/html\" width=\"100%\" height=\"100%\" src=\"http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1\" frameborder=\"0\"></iframe> <script> var tag = document.createElement('script'); tag.src = \"https://www.youtube.com/iframe_api\"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { events: { 'onReady': onPlayerReady } }); } function onPlayerReady(event) { event.target.playVideo(); } </script> </body></html>"

let width = UIScreen.mainScreen().bounds.width
let height = UIScreen.mainScreen().bounds.height
youTubeWebView = UIWebView(frame: CGRectMake(20, 120, width - 40, height-500))
youTubeWebView.mediaPlaybackRequiresUserAction = false
view.addSubview(youTubeWebView)
youTubeWebView.loadHTMLString(html, baseURL: NSBundle.mainBundle().resourceURL)

But though the video loads, it doesn't actually autoplay like it's supposed to.

Upvotes: 2

Views: 1598

Answers (1)

winresh24
winresh24

Reputation: 687

Try to put ?rel=0&autoplay=1

<iframe id="player" type="text/html" width="100%" height="100%" src="http://www.youtube.com/embed/M7lc1UVf-VE?rel=0&autoplay=1" frameborder="0"></iframe>

Hopes that fix your problem.

BTW: can't be done in IOS/Mobile

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback." https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations

Upvotes: 1

Related Questions