vzaar embed code for iOS 5 playback

Please be aware that this article is outdated.

Our iframe embed is now the recommended method and it is supported across all iOS versions

The next release of Apple's mobile operating system (iOS 5) expected to be released in October, has made a change that will prevent playback of vzaar videos on iOS 5 devices. We have looked into this extensively and come up with a solution to ensure your videos remain compatible with all iOS devices.

I've already embedded videos to my website, what do I need to do?

To ensure playback of your videos on devices running iOS5 when it is released, you will need to make one of the following changes:

• Re-embed your videos using the latest up-to-date embed code on vzaar
• Manually update your embed code

If you are re-embedding your html code, you now have a choice between the plain HTML style code that you've been using up until now, or the new IFRAME embed code.

Tell me more about the new IFRAME embed code

The IFRAME embed code has just been released in beta, and will ensure that in future we can resolve these issues from the server without you needing to re-embed your code.

Not only that, but it will also allow you to make changes to your video player without you having to re-embed it each time. All changes you make happen in real time to your video player, regardless where you have embedded it.

Whilst in beta, please test your embed first and let us know if you observe any issues.

Where can I find the new embed code?

Please view our help document on where to find the new embed codes.

I've got a lot of videos already embedded, how can I amend my already existing embed code?

If you have a lot of videos already embedded onto your website, it might be easier for you to amend the embed codes, rather than replace each of them individually with new ones.

Here are the following changes you'll need to make to the video tag in the vzaar embed code:

• Change the .flashplayer extensions to /flashplayer
• Change the .mobile extension to /video
• Change the .image extension to /image
• Add a parameter of preload="none"
• Remove the entire <embed>...</embed> tag

You can see this in the code samples below

Current (Old) Embed Code (doesn't work with iOS5)

<div class="vzaar_media_player">
<object data="http://view.vzaar.com/401491.flashplayer" height="216" id="video" type="application/x-shockwave-flash" width="384">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="http://view.vzaar.com/401491/flashplayer" />
<param name="flashvars" value="border=none" />
<embed allowFullScreen="true" allowScriptAccess="always" flashvars="border=none" height="216" src="http://view.vzaar.com/401491.flashplayer" type="application/x-shockwave-flash" width="384" wmode="transparent"></embed>
<video controls height="216" id="vzvid" onclick="this.play();" 
poster="http://view.vzaar.com/401491.image" 
src="http://view.vzaar.com/401491.mobile" width="384"></video>
</object>
</div>


Updated Embed Code (works with iOS5)

<div class="vzaar_media_player">
<object data="http://view.vzaar.com/401491/flashplayer" height="216" id="video" type="application/x-shockwave-flash" width="384">
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" />
<param name="movie" value="http://view.vzaar.com/401491/flashplayer" />
<param name="flashvars" value="border=none" />
<video controls height="216" id="vzvid" onclick="this.play();" 
poster="http://view.vzaar.com/401491/image" preload="none" 
src="http://view.vzaar.com/401491/video" width="384"></video>
</object>
</div>