YouTube Auto-Transmogrification
January 19th, 2008
Lego of mystery
I noticed that the YouTube movies I was embedding in my posts (as well as all embedded YouTube videos everywhere) showed up as “broken plugin” icons on my iPhone, even though the iPhone supports YouTube videos and can play them from links.
Last week Joe Maller released a bookmarklet for the iPhone called iTransmogrify! that fixes this problem in an ad-hoc band-aid sort of way. You download it to your computer, then sync it to your iPhone, and then when you find a broken embed you hit this bookmarklet and some JavaScript trickery replaces the embeds with follow-able links.
I didn’t want that extra step when testing my own site, so I made an automatic workaround.
I copied the script from the bookmarklet and put it in my footer after the </body> tag, with a user-agent detect, like this:
<!-- iTransmogrify! -->
<script type="text/javascript" language="javascript">
if (navigator.userAgent.indexOf("iPhone") > 0) {
if (typeof iTransmogrify == "undefined") {
d = document;
s = d.createElement("script");
s.setAttribute("src", "http://itransmogrify.googlecode.com/files/iTransmogrify.js?q=" + (new Date).getTime());
d.getElementsByTagName("head")[0].appendChild(s);
}
}
</script>
Now when I view my site from my iPhone, this script auto-transmogrifies the embedded YouTubes. There’s probably a way to get it working with the video switcheroo I’m using for my own animations too.
Update: I’ve updated the code and now offer a .js file for including on your pages.
« previously: Serena - Transparente | Home | next: Totoro Sightings »