«

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>

Here is an example:

Little 'Tinker Cartoon YouTube Video

This entry is filed under web development. Saved by 10 other people. It is licensed under a Creative Commons Attribution-Share Alike 3.0 License.

Creative Commons License

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

3 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

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.