Embedding iPhone-friendly Video
3.11.2010
POSTED IN Mobile, Training, Video | NO COMMENTS TAGS : embedded video, Quicktime Pro
Most times if you want visitors to your site to be able to view a video no matter what device they have, from desktop PC to mobile phone, your best bet will be to embed a YouTube upload. But what happens if you don’t want to trust your video to YouTube? There are many situations where hosting a video privately is preferable. Fortunately there are a couple of special methods you can use that will enable you to embed any video you like in a way that works for nearly every browser or device.
This first method uses Quicktime Pro to optimize and output a folder full of media files that you can upload to your server and then set your web page to use. A script will evaluate the visitor’s browser and device and deploy the best version of the video to match the situation. All this happens behind the scenes without alerting the visitor to the clever trick.
The video below shows a demonstration of the procedure and there are some notes further down to help summarize the process. The video is a fair-sized file, so give it a few seconds to buffer after you hit play. If your connection is a bit shaky it can help to pause the playback until the entire clip has loaded.
To check what version of Quicktime you have: Edit|Preferences|Register
Download link for Quicktime Pro upgrade (or update from within the software).
To process a video for embeding:
- 1. Open video in Quicktime Pro
- 2. Move playhead to a suitable frame to represent the video
- 3. Choose View|Set Poster Frame
- 4. Choose File|Export For Web
- 5. Set desired options, paying close attention to the name you use, because this is the last chance to change it easily
- 6. Set poster frame selection method
- 7. Proceed with export
- 8. Upload folder contents (except ReadMe.html) to an identically named folder on server
- 9. open ReadMe.html
- 10. copy header script code to head region of the page you plan to add video to
- 11. edit the embed code (in the second box of ReadMe.html) to ensure that all 3 instances of the .mov and .jpg have the full, correct path
- 12. add the embed code to the page in the position you want the embedded video to occupy
- 13. Save, upload, and test
This procedure is not the most user-friendly in existence, but it works quite well and, aside from using a YouTube video, is one of the only methods that seamlessly fulfills the needs of both desktop and mobile video. If you have questions or run into trouble getting it to work leave a comment and I’ll try to help.
Next time, I’ll show another option involving an arcane mixture of Flash video and HTML5…





