Introduction

Here is a simple example of a YouTube video embeded in an UIWebView. The design is very simple. A stack view inside the mainView. You can find just bellow the design in Xcode. By code, we will instantiate and add the UIWebView in the stack view.

Xamarin IOS Youtube Embed XCode
Xamarin IOS Youtube Embed XCode

By the way, at the end it should look like that.

Xamarin IOS Youtube Embed Design
Xamarin IOS Youtube Embed Design

The most difficult part is to manage the height of the content. Because we can’t have a responsive video and a thumbnail fit in the player. In summary, here is the main steps of the code.

  • Create the UIWebView
  • Generate the Html Request
  • Call YouTube
  • Manage the content size

Step by step

In the first part, we only initialize the UIWebView and the instance is added to the StackView:

We will manage the content size at the end of the loading. It is why we handle the LoadFinished event.

Now, you can call the StartLoad. This method generates the HTML and starts the loading. Firstly, we need the URL of a YouTube video. Be careful the /embed/ part is important. Otherwise you will get errors.

The div is only here for the responsive behavior. We embed the YouTube video via an iFrame. Only the width is specified. We use the maximum space available, the container width. In our case it is the stackview width.

Finally the LoadHmlString can be call with the HTML.

The next step is the resizing of the content. When the video is loaded, we can calculate the height. In our case, we don’t care about the width because we already know its value. Same as the stackView width. More information about the javascript here.

Finally, we can apply the calculated height.

The Complete Code

Conclusion

It’s hard to find a good example of a Youtube video embed fit in UIWebView on the Internet. Maybe the solution above is not perfect but at least it’s working 😉

  • I’m not an expert in CSS. So, videoWrapper class coming from this website (Here)
  • Html Iframe on W3Schools
  • The UIWebView documentation

I’m reading a lot of post on stackOverflow and Xamarin Forums. Due to that, It is difficult to list all of them. Anyway, thanks for their contributions 😉

Do you like Xamarin iOS ?

If you like this post don’t forget to have a look to the others previous article.

Happy coding! 🙂