Comments on: Youtube videos within websites on the Safari iPhone

By: Introducing Pixels From The Edge Version 3.0 | Pixels from the Edge

Introducing Pixels From The Edge Version 3.0 | Pixels from the Edge — Mon, 28 Mar 2011 17:10:52 +0000

[...] and so important that I wanted to do the next developers that came along a favor and leave them the solution. I setup a Blogger account within minutes and posted the article and I enjoyed it so much, to write [...]

By: Richie

Richie — Tue, 22 Feb 2011 21:02:44 +0000

Brilliant, thanks for sharing! It’s similar to my deadline ‘hack’ but looks to be a lot more developed and robust. Hopefully future visitors to this post will be able to use that link to help them.

Nitasha please come back and post what your were working on so I can see for myself =)

By: Nitasha

Nitasha — Tue, 22 Feb 2011 20:48:29 +0000

This is where I found my solution. It works really well all across the browsers and different phones and even iPad.
http://techdrawl.com/D-Boards/2-Developers-Corner/iPhone/iPad-embedding-YouTube-the-right-way

Thank you so much for your quick reply!

By: Richie

Richie — Tue, 22 Feb 2011 20:08:20 +0000

Hi Nitasha, I wrote this post over 2 years ago and it’s great to know it’s still relevant and can help you with your project. I hope you understand that at the time I wrote it I was also on a tight deadline and you should consider it as a hacked together example, even though it was robust and stable in production for well over a year until we refreshed the site. I can’t speak to other phones, I can only tell you that I wrote this with the iPhone in mind.

If you correctly use the 3 example code snippets as well as embed the SWFObject Javascript library into the page then it should all work as expected. Be careful with reading the documentation of the SWFObject library you download as it may be updated and require different syntax.

The 1st code snippet creates a boolean that determines whether or not the browser is the iPhone. The 2nd code snippet embeds the youtube player if it is the iPhone, and if not it writes alternate content (you can replace this part with an image or whatever you want that alternate content to be). And the 3rd part calls the SWFObject embed routine to replace the “YoutubeContent” div with the YouTube video. Like I say the important part that is missing from my code snippets is pulling in the SWFObject JS library.

This was written over two years ago, way before the iPad or android phones ever existed, so I just don’t know anymore how useful it still is, as a newbie you need to understand that this code was written to help point a more advanced user in the right direction. Having said that I hope it can still help you.

It would be interesting to know if the SWFObject library has evolved itself to allow for the iPhone/iPad Safari specific nuances. And I also want to point out that there have been some very valuable comments posted here over the years so make sure you carefully read what people have said as it could also be a big help.

Good luck! Please come back and post your project when it launches!

By: Nitasha

Nitasha — Tue, 22 Feb 2011 19:35:44 +0000

Thanks! This code works great on iphone. I’m a newbie, so my question is how do it make it work on iphone and other phones as well as the regular browsers on the computer. Right now if I use this code and open the page on a safari on my mac it says “You must have the Flash plugin to see this content”. Please respond I’m on a deadline.

Any help is much appreciated!

By: Richie

Richie — Fri, 28 Jan 2011 01:41:14 +0000

Glad to help bro. Can’t believe this is still relevant two years later!

By: Ryan

Ryan — Thu, 27 Jan 2011 16:17:30 +0000

Thanks for this! Just saved my butt on a deadline… appreciate you taking the time to write all this out.

I added a variable for iPad and used the new YouTube iframe rather than the embed and it worked great!

By: Ryan

Ryan — Thu, 27 Jan 2011 16:16:11 +0000

Thanks for this! Just saved my butt on a deadline… appreciate you taking the time to write all this out.

By: Shane

Shane — Wed, 30 Jun 2010 15:08:09 +0000

Great post, this sorted out my iPhone issues nicely. It doesn’t work on the iPad though.

The iPad requires the entire object code block to be provided, not just the embed tag. I did try Gustavo’s suggestion as validating code is obviously appealing, but the iPad didn’t seem to like the lack of an embed tag.

My current solution, and it’s one I’m not entirely happy with, is the provide only the embed for iphone and ipod, the full object tag for an ipad, and use swfobject for everything else with a default message for non-flash users.

This should probably be developed further by wrapping the whole lot in a video tag to support html5 first and foremost, but it’ll do for now.

Just out of interest, what are your issues with swfobject? It’s the standard at my agency too, and I’ve not yet had trouble with it aside from its lack of support for the mobile version of Safari.

By: Wes

Wes — Thu, 25 Feb 2010 02:24:01 +0000

I was searching Google about this same problem and came across this page. I have a website that redirects to a blogger page. It is a movie review and discussion site so I am heavily relying on embedding YouTube videos when allowed to get trailers. I just discovered the IPhone issue and need a more “for dummies” description of this solution. My use and understanding of HTML and adding things to my site using code is very basic. As described would this solution help me at all on Blogger? I appreciate any help and/or advice. Thanks!