This guide shows you how to embed individual videos on your website. It covers the following topics:
- Generating an Embed Code
- Inline vs. Popover Embeds
- Inline Embed Options
- Popover Embed Options
- Email Embed Options
Generating an Embed Code
An embed code is a snippet of code that you can use to add video content to a web page or email newsletter.
From the Channel Page, click on the episode you would like to embed.
From the Episode Page, click on Embed in the left sidebar. This will open the Embed screen.
Choose your embed type by clicking on either the Inline, Popover or Email Embed tab.
Customize the options to suit your needs. The embed code will update automatically to match the options you’ve selected.
Click on the blue Copy code button to copy the snippet of code to your clipboard. The code can now be pasted into your blog or website HTML.
Inline Embeds vs. Popover Embeds
There are three types of embed codes to choose from in Wistia: Inline, Popover and Email. We’ve created a short video to show you the difference between them:
Inline Embed Options
Inline embeds place the video directly on the page, inline with the rest of your content. You can customize your inline embed with the following options:
Video Size
Responsive: When this option is selected, your video will resize to fit its container.
Note for web developers: With a responsive embed, you will never need to manually adjust the dimensions of your embed code. If the video isn’t quite the right size, try adjusting the width of its parent container on your webpage first.
Fixed size: Choose this option if you need to set the video to specific dimensions that do not resize.
Embed Type
Standard: This is Wistia’s recommended JavaScript embed code.
Fallback: If you can’t include JavaScript on your website, use the Fallback (iframe) embed code instead.
Note: The Fallback embed code should only be used if the Standard inline embed won’t work on your website.
oEmbed
This option applies only to websites built using Wordpress.
Note: Wordpress users can choose between the Standard embed code and the oEmbed code. For more information, visit Wistia’s guide to working with Wordpress sites.
Popover Embed Options
Popover embeds display your videos on top of the other content on your web page. The video fills the entire screen, dimming out the rest of the page.
Link Display Options
You can launch a popover video with either a thumbnail image link or a text link.
Display link as fixed-size thumbnail: Generate an image link that will display at the specified size.
Display link as responsive thumbnail: Generate an image link that will automatically resize to fit its container.
Note: The options above apply to the thumbnail image link only. The video itself will always resize to fill the screen.
Display link as text: Generate a text link using the text you provide.
Email Embed Options
Email embeds create a thumbnail image with a play button that you can include in email campaigns and newsletters.
Note: Clicking the play button on an email embed opens the corresponding video in a new web page. Most email providers do not support the ability to play video within the email itself.
Email Provider
Select your email provider from the dropdown list.
Thumbnail Size
Specify a size for the video’s thumbnail image.
Link Destination
Redirect your viewers to the specified web page.
Note: By default, the Email Embed code links directly to the specified video file. Consider linking to a page on your credit union website where you are sharing the video.
Autoplay
When this option is selected, Wistia will attempt to play the video automatically when viewers arrive on the page specified in the Link Destination field.