Youtube videos within websites on the Safari iPhone
Launching a site recently that uses Youtube embedded videos, I found the videos didn’t show in the Safari browser on my newly purchased iPhone. This was a shame because the rest of the site worked perfectly (well almost but I’ll get to that in another post), it was like a lil’ cute mini version of the site!
Being an iPhone n00b I didn’t think much of it, I knew it was possible as I’d seen it working on other sites, but when I began to research my problem I became painfully aware that there is very little info on this issue out there. (That statement is not entirely true as I was being rushed, as always in advertising, to the finish line and not being allowed the time to think about my problem, in other words I was asking Google the wrong question).
But really it wasn’t easy to find out how to embed Youtube videos into your sites on the iPhone. Multiple searches using different terms wouldn’t provide me with the information I needed to understand what the HTML needs to look like to get the Youtube video to show up in a website. Eventually, after a couple of useful links from a buddy, I found out that the Safari browser on the iPhone automatically generates the necessary Youtube embed code, it’s as simple as that. When Safari sees the Flash embed code pointing to the Youtube player it converts it, so instead of the Flash player you will get the video placeholder image with the play button, which when clicked will take you to the iPhone Youtube player (which when you hit ‘Done’ takes you straight back to the site).
So it automatically gets converted…So why the hell wasn’t it working on my beautiful new site??? Doh, I was using SWFObject :p Now as far as I am aware SWFObject has become somewhat of an industry standard (though lately I had seen some flaws with it and questioned its usefulness), at least within my agency we’ve adopted it as a standard. What does SWFObject do exactly? It checks to see if your browser has the Flash plugin installed and if it does it replaces the target object with the Flash embed code, and if not then it does nothing. This allows the target object to contain alternative content when Flash isn’t available, usually something simple such as ‘This site requires Flash’, along with a link to the Adobe plugin. (SWFObject is also good for controlling the Flash version, so the user may have the Flash plugin but not the right version – the script definitely has its uses, but also its flaws.)
So I now understood what the problem actually was. So this time I was able to ask Google the right question, and it was able to give me the right answer – http://code.google.com/p/swfobject/wiki/iphone_mp4. The browser couldn’t convert the Youtube embed code because the SWFObject wasn’t ever allowing it to exist. If you ask me that’s another flaw with SWFObject, it should have been updated by now to manage itself correctly on the iPhone – 1. Check to see if it’s the iPhone Safari browser, and if so then 2. Check to see if it’s pointing to the Youtube player. Maybe writing that code will be my next task.
From there on it was easy sailing. I didn’t add to the SWFObject code itself as I wanted to maintain the integrity of that file, instead I wrote a wrapper within the target object. (Still rushed I made the mistake of doing the browser-detect back-end in PHP, which is great if you aren’t sat behind a 4 hour Akamai cache!!)
So the simple javascript code to check for the iPhone is:
<script>
var agent=navigator.userAgent.toLowerCase();
var is_iPhone = (agent.indexOf('iphone')!=-1);
</script>
This gives you the Boolean is_iPhone which you can then use set your SWFObject target object default HTML like:
<div id="youtubeContent">
<script>
if (is_iPhone){
document.write('<embed src="http://www.youtube.com/v/0uSnyL-RfHw&hl=en&fs=1&rel=0&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="562" height="341"></embed>');
}else{
document.write('You must have the Flash plugin to see this content');
}
</script>
</div>
And finally call the SWFObject embed method:
<script>
swfobject.embedSWF("http://www.youtube.com/v/JHQ9xNyBC0w&hl=en&fs=1", "youtubeContent", "562", "341", "8");
</script>
Not the most graceful method of doing this I’m sure, but within the time we had it serves us well.
And finally you can check the Youtube videos working within your iPhone Safari here www.thefordstory.com.
Hi there! I was reading through your post and others on the internet trying to find how I should embed my youtube videos so it would appear on iPhone/iPod Touch. I tried and found several methods to do it but honestly I was not satisfied with any of those. The first thing was the validation as XHTML. I can not use the element at all if I want my pages to validate. There are ways to embed the video to all browsers without this element, and I did it a while ago. But the videos were not appearing as a link to the youtube app on my Touch. My solution keeps the valid XHTML while still working for iPhone OS. The element I introduced for this is the “src” element. This is my valid code for youtube:
WHERE YOU SHOULD PUT YOUR YOUTUBE LINK AND THE VIDEO SIZE. The param name=”src” is the one that makes the magic on iPhone OS. (I just noticed that all the embed codes that worked had the src parameter and got to this option by trying a lot).
hope this helps :) my website page link is above if anyone wants to check (the video on the home screen is random and may be a myspace video, which will not show on iPhones).
Hi Gustavo, I appreciate you taking the time to comment. I guess you can’t post code in a comment. If you swing back by this way hit me up on Twitter and we’ll figure out a way to get me your code so I can add it to the post.
Youtube is my super favorite website. I cant spend a day without watching music videos on Youtube.
Great article. I’ve been looking for a way to have my embedded youtubes appear on the iphone. This looks like it would make a great plugin for those of us that aren’t so tech savvy.
Hi Alexa, glad you like. It’s been almost a year since I wrote this and I was kind of hoping the SWFObject would’ve updated it’s codebase to handle the iPhone+YouTube exception but it doesn’t seem to be the case yet. My work-around code still looks to be solid so hope it helps.
Does the iPhone not support the object tag?
The embed tag is not standards compliant and the article you linked recommends against using it. Youtube itself provides object HTML, surely if the iPhone replacement hack was designed for Youtube, it would work on the official Youtube HTML code. As I don’t own an iPhone I can’t test any of this, but is there any reason why you use embed tags in your example?
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!
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.
Thanks for this! Just saved my butt on a deadline… appreciate you taking the time to write all this out.
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!
Glad to help bro. Can’t believe this is still relevant two years later!
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!
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!
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!
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 =)
[...] 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 [...]