Embedding video

Embedding your videos into pages on your own website is one of the most powerful features vzaar offers. Click 'videos' in the green banner at the top of the screen:

which will bring you to your video list. Find the video you wish to embed then click 'Manage' to access the video manage page for that video:

The default embed type is the iframe. This is recommended for most users, and means that any improvements we've made to the underlying code are automatically reflected on your site. We would suggest that, unless there is a compelling technical reason preventing you from using the iframe, you only use the iframe for embedding.
Click the 'Copy to Clipboard' button and now you can paste the code to anywhere that accepts HTML, for example, the HTML source of a web page in a regular text editor, a "web content" or HTML widget in a website editing service like Squarespace, etc.

When the page is viewed by one of your viewers, the embed code will be replaced with our player and your video will be loaded, ready for playback just like this:

Note: If you are pasting the embed code into a Content Management System, make sure that the CMS does not modify the HTML code. There is usually a method of pasting the code into the CMS without it 'interpreting' the HTML. Sometimes a well meaning CMS breaks the code.
One final note - you may find that, especially if you're using a site-builder app. like Squarespace or Wix, your video may not appear in draft/editing mode - you may have to save your changes and publish the page to your site in order to see the video in the video player.

Related reading:  Embedding a video in a Wix site.

Embedding your videos responsively

With viewers using all kinds of different devices to view web pages these days, many websites use 'responsive web design' to ensure that their web pages look great regardless of the device the viewer is using to view.
Our video player is compatible with responsive design and will resize dynamically but you need to do a couple of things to set it up:
1. Amend the embed code
By default, the iframe contains fixed `width` and `height` attributes so you'll need to remove those. For example, this iframe:
<iframe id="vzvd-1152805" name="vzvd-1152805" title="vzaar video player" type="text/html"
width="560" height="316" frameborder="0" allowFullScreen allowTransparency="true" mozallowfullscreen
webkitAllowFullScreen src="//view.vzaar.com/1152805/player"></iframe>
	

would be edited to look like this:

<iframe id="vzvd-1152805" name="vzvd-1152805" title="vzaar video player" type="text/html"
frameborder="0" allowFullScreen allowTransparency="true" mozallowfullscreen webkitAllowFullScreen
src="//view.vzaar.com/1152805/player"></iframe>
	
2. Style the iframe accordingly
There are many approaches to responsive design. You may be using a framework (e.g. Bootstrap) which handles all aspects of responsive design for you. You may have your own in-house approach or you may be relatively new to responsive design.
Thankfully there is a lot of great support available on this subject and we've found a lot of customers have benefited from the ease and elegant simplicity of these approaches:

Still need help? Contact Us Contact Us