How To Embed YouTube Videos in an iOS App with Swift 4

This post will teach you how you can embed YouTube videos into any iOS App using Swift 4 and Xcode 10.

It seems as though the helper library youtube-ios-player-helper does not play nicely with Swift 4 or iOS 12 anymore. Luckily, hmhv has made some changes that make it stable in Swift 4/iOS 12. The updated helper library is available here.

While this post seems long, I go through each step in a lot of detail so that beginners can follow along. Feel free to skip through parts you’re comfortable with!

Let’s Get Started

In order to get started, open up your Xcode project or create a new one. Then follow the steps below.

Step 1:

First, we’re going to install the helper library via Cocoapods. If you don’t know about Cocoapods, you can learn more here or follow this guide.

Open up Terminal and move into the directory where you created your Xcode project. (an easy way to do this is type “cd” and drag and drop the folder into the Terminal window from Finder) Then, type:

pod init

Next, open up your project using the Project-Name.wcworkspace file, instead of the Project-Name.xcodeproj file you usually use. You’ll now see a section for “Pods” and if you open that up, you will see the “podfile” file.

Right underneath # Pods for Your-Project-Name, paste in the following:

pod "YoutubePlayer-in-WKWebView", "~> 0.2.0" 

It should now look like this:

Save the file by going to File -> Save, or ⌘+S. Next, go back to Terminal, and now type in:

pod install

The helper library should now be installed into your Xcode project. Your terminal screen should look like that. You might need to re-open Xcode using the Project-Name.xcodeproj file.

Step 2:

Now that we have the helper library installed, we can import the library into our ViewController. Open up the ViewController you want to embed your YouTube video on. At the top, import the library by typing:

import YoutubePlayer_in_WKWebView

Step 3:

Next, let’s open up the Storyboard and drag a UIView onto the ViewController. I’ve colored mine green below just for the purposes of this how-to.

I recommend making the UIView have a width of 375 and a height of 210. Then you can set the following constraints for autolayout.

Next, go to the inspector and change the Class from UIView to WKYTPlayerView.

Step 4:

Open up the Assistant Editor and make sure the ViewController.swift (or whatever file you’re embedding the video onto) is loaded.

Hold down the Control key and then click on the PlayerView and drag to the ViewController file. Release and name the object playerView so it should look like:

@IBOutlet weak var playerView: WKYTPlayerView!

Step 5:

Now open up the ViewController.swift file. In the “viewDidLoad” function, type in the following:

playerView.load(withVideoId: "Mc0TMWYTU_k")

Please note, you can use any YouTube video ID. Just go to YouTube, click on a video, and it’s the characters after “v=”

https://www.youtube.com/watch?v=Mc0TMWYTU_k

Your whole ViewController file should look like:

Step 6:

Build & run your Xcode project, wait for it to load, and then the video should pop right up as an embedded YouTube video. This is stable and doesn’t make use of a UIWebView which doesn’t seem to be supported anymore.

This is my first post on Medium, so please let me know if you have any feedback or suggestions. If you have questions, comment below and I can do my best to try and help!