It is safe to say that everyone who uses the Internet knows of YouTube. It is one of the most popular websites in the world. Millions of people use YouTube to watch videos through an assortment of devices, such as PC's, tablets, and smartphones. Apple's devices are not an exception and of course we can watch YouTube videos on the iPhone and iPad.
In this case, we're going to load a YouTube video when the user clicks on a specific button. The link will open a new web page, which allows us to play it.
The simple XHTML recipe can be found at code/ch10/youtube.html in the code bundle provided on the Packtpub site.
This recipe only requires the UiUIKit framework for building the user interface for this application. You can use your favorite YouTube video for this recipe. By default, we're using a video provided by Apple introducing the new iPad 2 device.
- Following the example from the previous recipe, create a new XHTML file called
youtube.htmland insert the standard headers for loading the UiUIKit framework. Then add the following CSS inside the<head>section to style the main button:<style type="text/css"> #btn { margin-right: 12px; } </style> - Our graphical user interface will be completed by adding the following XHTML code:
<div id="header"> <h1>YouTube video</h1> </div> <h1>Video</h1> <p id="btn"> <a href="http://m.youtube.com/watch?v=Z_d6_gbb90I" class="button white">Watch</a> </p>
- After loading the new application on your device, you will see a screen similar to the following screenshot:
- When the user clicks on our main button, Safari Mobile will go to the web page of the video at YouTube, as shown in the following screenshot:
- After clicking on the play button, the video will start playing. We can rotate our device for a better aspect ratio, as shown in the following screenshot:
This recipe is pretty simple; we only need to create a link to the desired YouTube video. The most important thing to keep in mind is that we'll use a mobile-specific domain for loading our video to mobile devices. The URL is simply http://m.youtube.com, instead of the regular URL http://www.youtube.com.
- Installing the UiUIKit framework recipe in Chapter 1 , Frameworks Make Life Easier.