«
»

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. Saved by 15 other people. It is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

Creative Commons License

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

5 Responses to ‘Embedding YouTube Video with iPhone Fallback’

  1. csunwebmaster posted on November 26th, 2009 at 9:41 PM. Permalink

    Standards compliant, iPhone compatible embedding of a YouTube video http://learningtheworld.eu/2009/youtube-embed/ (via @kliehm)

    This comment was originally posted on Twitter

  2. kevindees posted on November 27th, 2009 at 12:24 AM. Permalink

    Embedding YouTube Video with iPhone Fallback http://bit.ly/8n1oLU

    This comment was originally posted on Twitter

  3. nimbuin posted on November 28th, 2009 at 8:36 AM. Permalink

    Neat post by @kliehm on embedding youtube video with iphone fallback http://is.gd/55ccl

    This comment was originally posted on Twitter

  4. 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

  5. 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.

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.