Autoplay YouTube videos in WKWebView with iOS 11

Question

I want to have small YouTube player in my app. The only way i found to be recommended is embeding web page with YouTube player into my app. So i used WKWebView and loaded embed YouTube player page with autoplay parameter: https://www.youtube.com/embed/VUbsFtLkGN8?autoplay=1.

Code would be like:

let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webConfiguration)
let youtubeURL = URL(string: "https://www.youtube.com/embed/VUbsFtLkGN8?autoplay=1")
webView.load(URLRequest(url: youtubeURL!))

This embed player url autoplays in desktop Safari, but does not autoplay in mobile Safari or WKWebView. Can i force WKWebView to autoplay video somehow? Or use another YouTube player url?

Yes, in Safari, but I think you should be able to autoplay in your app. — Ondra

Dávid Pásztor Dávid Pásztor · Accepted Answer · 2018-05-25T12:43:53

It seems like the iframe API has changed since the time of the previous answer. I have updated the HTML that's loaded in the WKWebView based on the iframe API Reference. Using this code I managed to autoplay YouTube videos in fullscreen in a WKWebView on iOS11.

class YouTubeVideoPlayerVC: UIViewController {

    @IBOutlet weak var videoPlayerView: WKWebView!
    var videoURL:URL!  // has the form "https://www.youtube.com/embed/videoID"
    var didLoadVideo = false

    override func viewDidLoad() {
        super.viewDidLoad()
        videoPlayerView.configuration.mediaTypesRequiringUserActionForPlayback = []
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        // Size of the webView is used to size the YT player frame in the JS code 
        // and the size of the webView is only known in `viewDidLayoutSubviews`, 
        // however, this function is called again once the HTML is loaded, so need 
        // to store a bool indicating whether the HTML has already been loaded once
        if !didLoadVideo {
            videoPlayerView.loadHTMLString(embedVideoHtml, baseURL: nil)
            didLoadVideo = true
        }
    }

    var embedVideoHtml:String {
        return """
        <!DOCTYPE html>
        <html>
        <body>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>

        <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', {
        height: '\(videoPlayerView.frame.height)',
        width: '\(videoPlayerView.frame.width)',
        videoId: '\(videoURL.lastPathComponent)',
        events: {
        'onReady': onPlayerReady
        }
        });
        }

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

Autoplay YouTube videos in WKWebView with iOS 11

5 Answers