Embedding YouTube Video with iPhone Fallback

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

4 Responses to ‘Embedding YouTube Video with iPhone Fallback’

  1. Mark

    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

    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

    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

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