Embedding Video into the App | Free iOS Development Tutorial

Discover how to enhance your iOS development skills by learning how to embed a YouTube video into an app, and strategically placing it in the Bands Detail View Controller. This tutorial will guide you through the process, including coding specifics and valuable troubleshooting tips.

Key Insights:

The tutorial covers essential topics in iOS development, such as adding a video and moving it to the band detail page.
The exercise overviews the process of embedding a YouTube video into an app using specific lines of code.
Users are guided on how to replace code linking to the Jive Factory website with new code for the YouTube video.
By following the tutorial, users can learn how to make videos flexible and responsive within the app.
The tutorial also guides on how to move the video to the Bands Detail View Controller, enhancing the user experience by eliminating the need for a separate view to play videos.
Lastly, the tutorial provides a step-by-step guide on how to clean up and remove unnecessary files from the project, ensuring efficient app performance.

Learn how to embed a YouTube video in an iOS application with this comprehensive tutorial, which includes step-by-step instructions and detailed coding examples.

This exercise is excerpted from Noble Desktop’s past app development training materials and is compatible with iOS updates through 2021. To learn current skills in web development, check out our coding bootcamps in NYC and live online.

Topics covered in this iOS Development tutorial:

Adding a video, Moving the video to the band detail page

Exercise Preview

ex prev embed video

Exercise Overview

In this exercise, you’ll learn how to embed a YouTube video into the app.

Full-Stack Web Development Certificate: Live & Hands-on, In NYC or Online, 0% Financing, 1-on-1 Mentoring, Free Retake, Job Prep. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

Getting Started

If you completed the previous exercise you can skip the following sidebar. We recommend you finish the previous exercises (1B–3A) before starting this one.

If you completed the previous exercise, Jive Factory.xcodeproj should still be open. If you closed it, re-open it (from yourname-iOS Dev Level 2 Class > Jive Factory).
If You Did Not Complete the Previous Exercises (1B–3A)
1. Close any files you may have open and switch to the Desktop.
2. Navigate to Class Files > yourname-iOS Dev Level 2 Class.
3. Duplicate the Jive Factory Ready for Embedding Video folder.
4. Rename the folder to Jive Factory.
5. Open Jive Factory > Jive Factory.xcodeproj.

Adding a Video

When a user taps the button in the Bands Detail View Controller, we want to load a video of the band instead of taking users to the Jive Factory website.

In the Project navigator, click on WebViewController.swift.
The new code we are adding is going to replace the current code we have linking to the Jive Factory website. Let’s comment out those three lines of code. Select the code shown below:
```
let jiveURL = URL(string: "http://www.thejivefactory.com")
let myRequest = URLRequest(url: jiveURL! as URL)
siteWebView.load(myRequest as URLRequest)
```
Press Cmd–/ to comment out the code.

First we need to create a new string to hold the YouTube embedded video HTML code. After the code you just commented out, add the following bold code:

//   let jiveURL = URL(string: "http://www.thejivefactory.com")
//   let myRequest = URLRequest(url: jiveURL! as URL)
//   siteWebView.load(myRequest as URLRequest)

      let htmlString = ""

      // Do any additional setup after loading the view.
}

We’ll add the HTML code for the embedded video in between the quotes. Let’s get that code.

Open a web browser and go to: tinyurl.com/nicole-promised
Below the video and view count, click the Share link.
Below that, click Embed. On the right of the pop-up, you should see some HTML code.
Uncheck Show suggested videos when the video finishes.
Click into the HTML code to select it all.
Press Cmd–C to copy it.
Close the web browser window.
Switch back to Xcode.

We’ve prepared some code for you in a file to make the video flexible (responsive). Unfortunately YouTube doesn’t include this.
Go to File > Open (or hit Cmd–O).
Navigate to Desktop > Class Files > yourname-iOS Dev Level 2 Class > Code Snippets and open flexible-video.txt.
Paste the YouTube code in a new line after the existing code. Notice there are some similarities in the two blocks of code, but we’ve replaced the height and width with some code that makes the video flexible.
We only need the link to the video from the code YouTube provided. In the YouTube code (that you pasted at the bottom) select just the link to the video:
```
//www.youtube.com/embed/Go9k14yrxeQ?rel=0
```
Press Cmd–C to copy it.
In the code above that was provided, highlight PASTE_LINK_HERE to select it (make sure http: is NOT selected—we need that to make the video show up):
```
<html><body><iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"http:PASTE_LINK_HERE\" frameborder=\"0\" allowfullscreen></iframe></body></html>
```
NOTE: Previously, YouTube automatically provided http: in its embed code. Now they are giving developers the choice to use http: or the more secure https:. If you accidentally typed over http:, replace it so the video will be viewable.
Press Cmd–V to paste the link over it.

The code should now look like it does below. Note the slash at the end of the YouTube URL:

<html><body><iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"http://www.youtube.com/embed/Go9k14yrxeQ?rel=0\" frameborder=\"0\" allowfullscreen></iframe></body></html>

Select the code shown above. Don’t select the YouTube-provided code at the bottom, just get the top code!
Press Cmd–C to copy it.
Close the file.
Place the cursor in between the quotes in the let htmlString = "" line of code.

Paste the code so you end up with this:

let htmlString = "<html><body><iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"http://www.youtube.com/embed/Go9k14yrxeQ?rel=0\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

Next we need to load up the HTML string directly into the siteWebView. Add the following bold line of code (feel free to replace the comment line about additional setup):
```
let htmlString = "<html><body><iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"http://www.youtube.com/embed/Go9k14yrxeQ?rel=0\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

siteWebView.loadHTMLString(htmlString, baseURL: nil)
}
```
NOTE: While baseURL is required, we’re not using it so we set it equal to a nil value. If all your links start with the same base URL (such as http://www.youtube.com) you could include it. Then links in the web view don’t need to repeat that same base address as well. While we could have used it in our example, we think it’s better to see complete youtube.com URLs in the code, rather than splitting them apart.
Hit Cmd–S.
In the Project navigator, click on Main.storyboard.
Scroll over to the Bands Detail View Controller.
Double–click on the name of the Jive Factory Website button, change the name to Play Video and hit Return. Don’t worry about the positioning for now.
Click the Run button.
When the Simulator finishes loading, click one of the band listings.
Click the Play Video button.
You should see the Web View Controller now has a video preview. Click on it to play.
After the video starts playing, click the X button to go back to the Web View Controller.

Moving the Video to the Band Detail

Now that we think about it, it seems unnecessary to go to a whole other view to play the video. Let’s add the video directly in the Bands Detail View Controller.

Switch back to Xcode.
Select the Play Video button on the Bands Detail View Controller and hit Delete.
In the search bar of the Object library , delete any existing text and type: web
Drag WebKit View below the Description. Don’t worry about placement, we’ll set that next.
With the WebKit View still selected in the Editor, in the Utilities area on the right, click on the Size inspector tab .
In the Size inspector set the following:

X: 20

Y: 267

Width: 278

Height: 156
Click on the Attributes inspector tab .
Click the Adjust Editor Options icon in the top right of the window and choose the Assistant option. We want to see the storyboard showing on the left next to BandsDetailViewController.swift on the right.
If BandsDetailViewController.swift isn’t showing on the right side, click the menu bar at the top of the file and choose it.
We are going to add the WebKit View directly to this View Controller, so below the import UIKit statement add the following bold code:
```
import UIKit
import WebKit
```
Let’s create an outlet for the WebKit View on this page. Hold Control and drag from the WebKit View element in the Editor to the BandsDetailViewController.swift file below the last IBOutlet.
Set the following:

Connection: Outlet

Name: videoWebView

Type: WKWebView

Storage: Weak
Click Connect.
Now we need to move the video code. We can copy and paste the code we already have from the WebViewController.swift file. In the Project navigator, click on WebViewController.swift.

Select the embedded video code in the viewDidLoad method shown:

let htmlString = "<html><body><iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"http://www.youtube.com/embed/Go9k14yrxeQ?rel=0\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

siteWebView.loadHTMLString(htmlString, baseURL: nil)

Hit Cmd–C to copy it.
Go to BandsDetailViewController.swift.
Find the viewDidLoad method (around line 24).

At the end of the method, paste the code you just copied:

   bandImage.image = UIImage(named: currentBandDetail!.fullImageName!)

   let htmlString = "<html><body><iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"http://www.youtube.com/embed/Go9k14yrxeQ?rel=0\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

   siteWebView.loadHTMLString(htmlString, baseURL: nil)
}

Change siteWebView to videoWebView:

videoWebView.loadHTMLString(htmlString, baseURL: nil)

Click the Run button.
When the Simulator finishes loading, click on a band listing.
Now the video should load directly in the detail view. Click it to launch the video. Awesome! In the next exercise, we’ll load different videos for each of our bands.
After the video starts playing, click X to stop it.
Switch back to Xcode.

Cleaning Up

Now that we’re no longer using the Web View Controller, let’s delete it. In the Project navigator, click on Main. (If you don’t see it, click the Project navigator tab first.)
Click the top of the Web View Controller to select it. (Be sure to get the controller that’s below the Bands Detail View Controller, not the Web View!) The controller should become outlined in blue.
Hit Delete to remove it.
Notice in the Project navigator, we still have WebViewController.swift. Select it.
Hit Delete.
When asked about moving the files, click Move to Trash.
Hit Cmd–S to save.
Keep this file open. In the next exercise, we’ll add a different YouTube video for each band.

Connection:	Outlet
Name:	videoWebView
Type:	WKWebView
Storage:	Weak

X:	20
Y:	267
Width:	278
Height:	156