Popovers start as a clickable thumbnail with a play button. When the viewer clicks play, the player emerges in a "theater" style overlay, dimming the background to focus attention on your content.
This embed style is ideal for pages where you need to neatly fit multiple video embeds or nest videos alongside other important content like text or images. Popovers also add a splash of interactivity to your site, allowing you to launch videos from various page elements - be it images, links, or buttons.
Get started with Popovers
From the Embed menu, select the Popover tab. Here, you’ll be able to select some options and copy your embed code. Popover embeds only have one embed type, using our Standard embed format.
We recommend trying Popovers with the Display Link as Thumbnail option and Responsive sizing to start.
Example: Popover embed, Display Link as Thumbnail, responsive sizing
<script src="https://fast.wistia.com/embed/medias/lqy5p1741e.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<span class="wistia_embed wistia_async_lqy5p1741e popover=true videoFoam=true" style="display:inline-block;height:100%;position:relative;width:100%"> </span>
</div></div>
Popover Options
Choose how you want your popover embed to be launched from your page.
Display Link as Thumbnail
The default option displays the popover as a clickable thumbnail image and play button which matches the selected player color.
Responsive
Enable this option and the popover thumbnail will resize dynamically to fit any container it’s placed in.
Responsive sizing only affects the popover thumbnail. The popover player is always responsive to the browser window when opened, maintaining a slight margin from the edge of the page.
You can uncheck responsive sizing if you prefer to specify a fixed size for the popover thumbnail.
Display as Text Link
This option hides the popover player behind a simple HTML hyperlink that launches the video. This is a text link by default, but you can replace the text with any HTML element inside the link and it will launch the video, including images, buttons, and more.
See more tips and some examples of launching popover embeds from any element on your page.
Example: Text Link Popover
<script src="https://fast.wistia.com/embed/medias/z2g0vby518.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><span class="wistia_embed wistia_async_z2g0vby518 popover=true popoverContent=link videoFoam=false" style="display:inline;position:relative"><a href="#">Click here to watch!</a></span>
Advanced Popover Customization
For even more flexibility and control of your popover embeds, check out the resources below:
Embed Options and Plugins provide a whole new layer of embed-specific customization and functionality.
Popover Options and API is a set of popover-specific embed options and JavaScript API methods.
Open Popovers with Embed Links for even more control over how Popover embeds open on your pages.