«
»

Embedding YouTube Video with iPhone Fallback

by Martin Kliehm, posted on Wednesday, November 25th, 2009 at 7:00 PM. RSS 2.0

You can leave a comment, or trackback from your own site. . Short URL.

Just a quick note as a reminder to myself how to embed YouTube videos in a standards compliant, valid XHTML syntax. It works across all current browsers, doesn’t use <embed>, and has the elegant fallback displaying a still image that is linked to YouTube, thus enabling iPhone users without Flash to view the video.

  1. <object type="application/x-shockwave-flash" data="http://www.youtube.com/ v/ VideoID" width="480" height="360">
  2. <param name="movie" value="http://www.youtube.com/ v/ VideoID" />
  3. <param name="quality" value="high" />
  4. <param name="allowFullScreen" value="true" />
  5. <!-- Fallback content -->
  6. <a href="http://www.youtube.com/ watch? v=VideoID">
  7. <img src="http://img.youtube.com/ vi/ VideoID/0.jpg" width="480" height="360" alt="[Video title]" />
    YouTube Video
  8. </a>
  9. </object>

Please note that there are spaces in the code above to allow linebreaks. If you copy and paste you need to remove those. ;)

Here is an example:

Little 'Tinker Cartoon YouTube Video

This entry is filed under web development. It is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

Creative Commons License

Tags: , , , , , , , , , , .

7 Responses to ‘Embedding YouTube Video with iPhone Fallback’

  1. Mark posted on May 27th, 2010 at 7:37 PM. Permalink

    Thanks for the code @kliehm!

    It works very well, thanks so much.

    Two questions re: the user experience:

    1. Is there any way of getting the play symbol to appear over the frame of the video (without creating it in photoshop)?
    2. Once the user watches the video, is there any way of enabling the user to ‘easily’ navigate back to your site without having to close YouTube on the iPhone, and relaunch the web browser (safari/opera mini)?

    Thanks, Mark

  2. Martin Kliehm posted on May 28th, 2010 at 11:25 AM. Permalink

    Hi Mark, I’ve been thinking about the “play” symbol, too, but I believe the easiest and most compatible way would be an overlay with an image. On the other hand we’re talking about highly advanced browsers, so I guess something could be constructed with CSS3. Anybody up for the challenge?

    Concerning your second question I don’t think there’s a way to return to the browser if we implement just a link. In that case the link opens in the YouTube App, and there’s no way back. An alternative and even sexier approach would be native HTML5 video support. Alas I don’t think the API already features that.

  3. fantasmo posted on July 14th, 2010 at 10:57 AM. Permalink

    But this leads the user to youtube instead of just opening the movie on my website? So users got lost and can not get back to my page.

  4. stefano posted on September 30th, 2010 at 12:31 PM. Permalink

    is possible to have the “full screen” button in the right down corner like the default embed youtube video?

  5. István Szép posted on October 21st, 2010 at 11:07 AM. Permalink

    I used a screenshot, put on it my own play symbol, and tadaa, it’s shown on the iphone. Works like a charm, thank you!

  6. Dave posted on December 15th, 2010 at 3:47 AM. Permalink

    You solved a problem that I’ve been wrestling with for a long time. Plays great on my laptop and my iPhone. You’re brilliant! Thanks!

  7. Pogo! posted on July 1st, 2011 at 11:32 PM. Permalink

    Thank you very much, this helped me to solve the problem. @fantasmo: Iphone cannot play Video’s like Youtube Video’s, so this is a very nice alternative.

Leave a reply

Gravatars and hCards are automatically included in comments if available, e-mail addresses are never disclosed. HTML in comments is disabled to ensure a valid document. Please use Markdown instead.