Using the "Overlay" window

Display your videos, multimedia, contact forms, and external content in a slick, new interface. This new tool loads content into an overlay and automatically dims the background for a more theatric, professional presentation. Best of all, it's seamless — no more pop-ups!

Overlay window for videos

Supported File Types
The new overlay supports a variety of formats.

  • Videos: .MOV, .MP4, .FLV, Vimeo, YouTube
  • Other Multimedia: Soundslides, Flash (.SWF files), ShowIt Fast

Saving Your Content
Adding video or multimedia slide shows to your site is easy! You can add a link to launch an overlay anywhere you can add text in your site: in your captions, text sections, or overview fields.

We highly recommend you use the H.264 Quicktime compression for best results for your videos, and the AAC codec for audio. If you have old videos saved in other formats with different compressions and codecs, you can use those, but H.264 is smaller and much better-looking than the majority of older codecs. Just be sure to check "Prepare for Internet Streaming" and "Fast Start" if those options are available in your video compression program. Try to keep the file sizes around 5MB per minute of video.

Uploading Your Files
Log-in to your FTP server and upload your video or multimedia files into this folder:

www.yourdomain.com/web/content/content/videos/

It's located next to your "photos" folder on the server.

Content Management Tool
When you add a link in your Content Management Tool, it should point to the location of your files on the FTP server. It should look something like this example:

overlay:content/videos/movienamehere.mov,500,330

The two numbers on the end are your movie width and height; make sure those are the exact dimensions of your actual video or presentation files.

Overlay screen grab for videos and multimedia  Overlay screen grab for videos and multimedia

Soundslides
If you're using a Soundslides presentation, upload your "publish_to_web" folder. You may want to rename this folder to match your project's name. Make your link using your movie dimensions at the end:

overlay:content/videos/project_name/soundslider.swf,800,600

Vimeo
When you click on your "embed" button in Vimeo, you'll get a piece of code that looks something like this:

<object width="800" height="600"><param name="allowfullscreen" value="true"/><param name= "allowscriptaccess" value="always" / ><param name="movie" value= "http://vimeo.com/moogaloop.swf?clip_id=1234567&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp; show_portrait=0& amp;color=&amp;fullscreen=1"/><embed src= "http://vimeo.com/moogaloop.swf?clip_id=1234567&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1& amp;show_portrait=0&amp;color=&amp;fullscreen=1" type= "application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always"width="800" height="600"></embed></object><p><a href="http://vimeo.com/1234567">Video Title</a>from<a href= "http://vimeo.com/user1234567">John Doe</a>on<a href="http://vimeo.com">Vimeo</a>.

Copy the part in quotes that follows the "param name= 'movie' value=" portion into your Content Management Tool. Be sure to also include "overlay:" at the beginning and the dimensions at the end.

overlay:http://vimeo.com/moogaloop.swf?clip_id=1234567&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0& color=&fullscreen=1,800,600

YouTube
Once you retrieve your embed code from YouTube, it will look similar to the following:

<object width="800"height="600"><param name="movie"value="http://www.youtube.com/v/R2_abc123DE&hl=en&fs=1&hd=1"></param><param name="allowFullScreen"value= "true"></param><param name="allowscriptaccess"value="always"></param><embed src= "http://www.youtube.com/v/R2_abc123DE&hl=en&fs=1&hd=1"type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="800"height="600"></embed></object>

Copy the part in quotes that follows the "param name="movie" value=" portion into your Content Management Tool. Be sure to also include "overlay:" at the beginning and the dimensions at the end.

overlay:http://www.youtube.com/v/R2_abc123DE&hl=en&fs=1&hd=1,800,600

External HTML Pages
If you have a custom contact form, mailing list, shopping cart, archive, or any other use for separate HTML pages, you can use the following format:

overlay:http://www.domainname.com/index.html,800,600