Setting the Video for Each Band

Topics Covered in This iOS Development Tutorial:

Defining the Video URL for Band Detail Objects, Making the URL a Dynamic String

Exercise Preview

Exercise Overview

In the previous exercise, we successfully embedded video content into our detail view—but there's a critical flaw. Every band displays the same video, regardless of which one the user selected. This creates a poor user experience and demonstrates a common beginner mistake: hardcoded values where dynamic data should exist. In this exercise, you'll learn to implement proper data binding by passing the correct video URL based on the currently selected band, creating a truly dynamic and professional-grade interface.

Getting Started

1. Before proceeding, ensure you've completed the foundational exercises that establish our app's core functionality. If you completed the previous exercise, you can skip the following sidebar. We strongly recommend completing exercises 1B–3B sequentially, as each builds essential skills and code structure for this advanced implementation.

   If you completed the previous exercise, Jive Factory.xcodeproj should still be open. If you closed it, navigate to your project folder (from yourname-iOS Dev Level 2 Class > Jive Factory) and reopen it.

   Prerequisites Verification

   0/3

   Complete exercises 1B-3B

   Previous exercises build the foundation for this video integration tutorial

   Open Jive Factory.xcodeproj

   Ensure the project file is accessible in your iOS Dev Level 2 Class folder

   Verify BandDetail class exists

   The class structure is required for adding new video URL properties

   Class Property Addition

   Adding a videoURL property to the BandDetail class enables each band object to store its unique video URL for dynamic loading.

Expanding Our Data Model

As experienced developers know, scalable applications require flexible data models. Currently, our BandDetail class contains basic information about each band, but lacks the video URL property necessary for dynamic content delivery. Let's enhance our model to support multimedia content—a crucial step for modern mobile applications where rich media drives user engagement.

1. In the Project navigator, select BandDetail.swift to open our data model.

2. Add the new video URL property after the last existing property declaration:

   var showDetails:String?
   var videoURL:String?
   
   }

   This optional String property will store each band's unique video URL, allowing for flexible content management without breaking existing functionality if a band lacks video content.

3. Save your changes with Cmd–S.

Defining Video URLs for BandDetail Objects

With our enhanced data model in place, we'll now populate each band's video URL property. This approach separates content from presentation—a fundamental principle in professional iOS development that ensures maintainable, scalable code. Rather than having you manually research and input each YouTube URL, we've prepared optimized embed URLs that disable related videos and provide the cleanest user experience.

1. In the Project navigator, select BandsTableViewController.swift where our band objects are initialized.
2. To streamline this process and ensure accuracy, we've prepared a code snippet with all four band objects properly configured with their respective video URLs. Press Cmd–O to open the file dialog.
3. Navigate to Class Files > yourname-iOS Dev Level 2 Class > Code Snippets and open objects-with-videoURL.txt.
4. Select all content with Cmd–A.
5. Copy the code with Cmd–C.
6. Close the text file.

7. Back in BandsTableViewController.swift, locate and select the entire block of code that defines our four BandDetail objects:

   let nicoleAtkinsBandDetail = BandDetail()
   nicoleAtkinsBandDetail.bandName = "Nicole Atkins"
   nicoleAtkinsBandDetail.bandType = "Rock"
   nicoleAtkinsBandDetail.bandDescription = "Nicole will knock your socks off."

   Code Omitted To Save Space

   blackAngelsDetails.nextShowDate = "Sun 5/6"
   blackAngelsDetails.nextShowTime = "8pm"
   blackAngelsDetails.venue = "Cake Shop"
   blackAngelsDetails.showDetails = "Over 21—$15"

8. Replace the selected code by pressing Cmd–V.

9. Examine the new code structure, particularly Nicole Atkins' video URL definition:

   nicoleAtkinsBandDetail.videoURL = "http://www.youtube.com/embed/Go9k14yrxeQ?rel=0"

   Notice the embed URL format with the ?rel=0 parameter, which prevents YouTube from showing related videos after playback—maintaining focus on your app's content rather than leading users away to unrelated videos.

10. Save your changes with Cmd–S.

Implementing Dynamic String Interpolation

Now comes the crucial step: transforming our hardcoded video implementation into a dynamic system. We'll use Swift's string interpolation feature—a powerful tool that allows us to embed expressions directly into string literals. This technique is essential for creating responsive, data-driven interfaces that adapt based on user interaction and stored content.

1. In the Project navigator, select BandsDetailViewController.swift to modify our video display logic.

2. Locate the htmlString constant that currently contains our hardcoded video embed:

   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>"

   This static approach works for prototypes, but professional applications require dynamic content loading. We'll replace the hardcoded URL with a reference to our currentBandDetail object's videoURL property, utilizing Swift's string interpolation syntax.

3. Carefully select only the YouTube URL portion (highlighted in bold below):

   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>"

4. Replace the selected URL with the dynamic string interpolation syntax:

   let htmlString = "<html><body><iframe style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" src=\"\(currentBandDetail!.videoURL!)\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

   The \(currentBandDetail!.videoURL!) syntax tells Swift to evaluate the expression and insert the result into the string. The exclamation marks force-unwrap our optional values—appropriate here since we control the data flow and know these values will exist.

5. Test your implementation by clicking the Run button.
6. Once the Simulator loads, select any band from the list and observe which video plays in the detail view.
7. Return to the band list using the Bands button in the top-left corner.
8. Select a different band and verify that a different video loads automatically. This demonstrates successful dynamic data binding—each band now displays its unique video content.
9. Return to Xcode to continue development.

10. Save your work with Cmd–S.