Learning the World » object http://learningtheworld.eu Tue, 06 Nov 2012 00:17:33 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.1 Embedding YouTube Video with iPhone Fallback http://learningtheworld.eu/2009/youtube-embed/ http://learningtheworld.eu/2009/youtube-embed/#comments Wed, 25 Nov 2009 17:00:01 +0000 http://learningtheworld.eu/?p=729 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.]]> 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

]]> http://learningtheworld.eu/2009/youtube-embed/feed/ 4