This is a quick overview of the various ways you can embed a Multipop video, and when it might make sense to apply each option. Let's start with two concepts: embed style and embed size. If you'd like the short story, embedding in overlay style and responsive size is best for most scenarios, but read on to understand more.
Embed Styles - Overlay vs. Inline
There are two embed styles: overlay and inline.
An overlay video plays in a lightbox that fades in on top of the page. This lets the video take up the entire size of the browser window. What is actually embedded is an image we call a "poster" with a play button on top. When you press play, the lightbox displays with video inside it. This lets you fit the poster to your layout, yet lets the video play as large as possible for maximum impact and minimum distraction. This is our recommended embed style for most scenarios, and looks like this (press play to see the lightbox):
An inline video plays right in the page where it's embedded. This style works in cases where you have plenty of space for the player to be big enough that the content remains legible. We recommend the video be embedded into a container (e.g., a column on your page) that is at least 600px wide. It looks like this:
Getting the Embed Code
So, how do you actually embed using these styles? Within the Multipop player is a "Share" button near the lower right corner. It displays a panel that includes choices for generating embed codes. Just pick your style, copy the code and paste it into your page. There is also a Preview link that will show how the embed will look in a sample page.
You can also get to the share panel from within the Multipop editor without even playing the video. Links appear in the video list, and a share button in the header when editing a specific video.
Embed Sizes - Responsive vs. Fixed
With either embedding style, you can set the embed size as either "responsive" or "fixed".
Responsive size automatically scales the video or poster be the full width of its container. This is our recommended option in most cases because this lets Multipop resize itself to fit desktop, tablet and mobile devices, and to varying widths of the browser window.
A common question at this point is typically "what is the height given that the width is variable?" That depends on the embed style:
- For inline embeds, the height is always 80% of the width because the Multipop player always renders at a 5:4 aspect ratio.
- For overlay embeds, the height is set to maintain the aspect ratio of the poster image you uploaded into the editor. This lets you control the exact shape of the embedded image.
Fixed size lets you specify the dimensions of the video or poster. This option is useful when you have a fixed layout on your page and want to control exactly what is being embedded within. Its works a bit differently for each embed style:
- For inline embeds, you set the width of the player, and the height is set to 80% of it in order to maintain the player's 5:4 aspect ratio.
- For overlay embeds, you set the width of the poster, and the height is set to maintain the aspect ratio of the original poster image you uploaded into the editor. This lets you control the exact shape of the embedded image.
Here are examples of the various combinations:
A Word on Fixed Inline Embeds & Mobile Devices
One caution on using fixed size inline embeds. There are actually two Multipop players: a desktop version and a mobile version, each with a different user experience. The mobile player is always rendered when the width is less than 500px. So if you embed at this size or smaller, you will always get the mobile experience, even on desktops and tablets. If you embed 500px or larger, that won't force the desktop experience onto phones, but will likely truncate the player in the page because the phone screen is small. So bottom line: this combination is useful only in cases where you know your page is not going to be rendered on screens smaller than the allotted size.
Setting the Sizing Options
By default, sizing is set to responsive for both embedding styles. Simply uncheck the responsive box to set fixed sizing. Enter a width, and the height will be calculated per the rules above.
Other Embedding Options
To the left of the sizing options are a few other options you can set when embedding:
- Open links in new windows. By default, outbound links from your interactive content open a new browser tab or window. If you turn this off, the browser will leave the video and open the link in the same window. This can be useful if the video is embedded on your own site and your outbound links go to other pages on your own site. For example, a retailer may use the video to promote products and push viewers to the product detail pages.
- Auto-play. This applies to inline embeds only. The video will play automatically when the containing page loads. This can be useful if you are embedding the video in a rich media ad unit for example.
- Auto-mute. This applies to inline embeds only. Causes the volume to be muted when playback begins. If you are embedding into a rich media unit with auto-play on, you can set this option to comply with ad standards.
Cool Trick #1: Auto-Play Links to Embedded Overlay Videos
Now on to an advanced, but very cool, feature. What if you've embedded an overlay video into your site, and would like to email a link to that page that automatically plays the video? You wouldn't want the page to always do that for casual visitors, just for people you want to see the video first.
As an example, here is one of our clients with a Multipop video embedded in overlay mode on their home page:
If you want the overlay to automatically display and auto-play when the page loads (i.e., without user interaction), add a parameter showmultipop=true to the URL like this:
And if you happen to have a page with more than one Multipop embedded you can even tell it which one to play with showmultipopid=[your video id] like these. Note each link plays a different video in the page:
The video id number is available in the video editor. Look at the title in the purple area in the header when you edit the video. The number is in a small font just after the title itself.
Cool Trick #2: Loop Links
We'll finish with how to loop a video. We use this ourselves when running demos at trade shows. You can make any Multipop video play over and over in a loop by adding /loop to its play URL, like this:
That's it for embedding. Let us know if you have cases we're not covering.