Embedding Video on Your Website
Want to add video to your website (embedding) but don't know where to start? Here's a quick guide to get you off the ground!
Putting video on your website is the best way to get your message across. The act of putting a video on your website is called embedding, and in this guide we’ll show you how to get it done right.
Pre-Embedding
Once you’ve uploaded and customized your video, you’re ready to go ahead and embed. Huzzah!
Fun fact: even after you embed a video on your website, you can make changes to it in Customize. Those changes will automatically apply anywhere your video is embedded. If you want to use different customizations across multiple embeds of the same video, you can make multiple copies of the video or use advanced embed options in your embed codes.
Generate an Embed Code
An embed code is a snippet of code that you can use to add content (like a video!) to a web page.
To generate an embed code for your video, start by clicking the Embed & Share button from your Media Page. That will open the Embed & Share screen, where you can choose your embed code type and fine-tune it for your page.
There are two main types of Wistia embed codes: Inline embeds and Popover embeds. Read on to learn more about both!
Inline Embeds
Inline embeds will place the video directly on the page, inline with the rest of your content. Here’s an example “Standard” inline embed:
This is what a standard inline embed code looks like:
<script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:620px"> </div>
Feel free to grab that embed code to try it out, or go to your Wistia account and get an inline embed code for you own video!
Fallback (iframe) Embed
While the Standard inline embed code will work great in most cases, some websites can give it a little trouble. Luckily, there’s a fallback option:
The Fallback embed is like a Subaru Impreza: simple, reliable, and if you ask the Wistian writing this help page, a pretty nice way to get from point A to point B.
If you can’t include JavaScript on your website, or something is making your Standard embed look a little … weird, give the Fallback option a try.
Here’s an example of a fallback inline embed code:
<iframe src="//fast.wistia.net/embed/iframe/avk9twrrbn" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="620" height="349"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>
Popover Embeds
Popover embed codes make your videos pop over the rest of your content instead of playing inline.
You can launch a popover video with either a text link or thumbnail image. When clicked, that link will open a lightbox with your video inside. Here’s an example of a popover embed using the thumbnail option:
And here’s the popover embed code behind that video:
<script src="//fast.wistia.com/embed/medias/pukozq6xf0.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<span class="wistia_embed wistia_async_pukozq6xf0 popover=true popoverAnimateThumbnail=true" style="display:inline-block;height:169px;width:300px"> </span>
Copy and paste that into your website to give it a try! Be sure to read the section on Responsive Design with Popover Embeds as well.
Embedding Responsively
Responsive videos are happy videos. Responsiveness works a bit differently for inline embeds and popover embeds, so let’s dig into both separately here 👇.
Responsive Design with Inline Embeds
Inline embed codes are responsive by default, meaning that your video will automatically resize itself to the width of its container. Hooray!
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. If you get stuck, just reach out to our Customer Happiness team!
If you need to set the video to specific dimensions though and don’t want it to be responsive at all, just switch to the Fixed Size option and choose a width or height. The dimension you don’t adjust will automatically change to maintain the aspect ratio of your video.
Here’s an example of a responsive embed to play with:
<script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="//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%;">
<div class="wistia_embed wistia_async_j38ihh83m5 seo=false videoFoam=true" style="height:100%;width:100%"> </div></div></div>
Responsive Design with Popover Embeds
With popover embeds, there are two separate things to consider:
- The responsiveness of the thumbnail image (unless you’re using a text link).
- The responsiveness of the video itself, when it’s “popped over” the page.
The thumbnail of a popover embed is not responsive by default. But if you want it responsive, that’s as easy as clicking the “Responsive” checkbox:
That’s all it takes to make the thumbnail responsive. Wahoo!
The video component of a popover embed _is_ responsive by default. Since the videos “pops” over the rest of the page, it doesn’t have to worry about bumping into anything else. It will automatically fill up most of the page, leaving some comfortable space between the video and the edges of the browser window.
Video SEO
Video SEO is a set of tools and processes to help search engines identify and index your videos. Wistia’s Standard embed codes are automatically SEO-friendly, and they’ll help people find your videos on your website – not someone else’s.
Check out the Video SEO help page for more detail 🔍 and tips on getting Video SEO done right.
Link in Email Campaign
Email is a great way to share your videos and re-engage with your growing audience. And Wistia’s email marketing tools make it easy! See the Email Marketing page for details.
Protecting Your Embeds
Want to make sure your videos can only be played on your website (and of course, within your Wistia account)? Check out Domain Restrictions for that. For more information on keeping your videos secure, see the Security guide.
Embedded Video Stats
Now that your video is embedded on your webpage, you can use Wistia’s analytics to see how your viewers are interacting with the content.
Troubleshooting Embed Issues
Embedding can be tough! If you’re stuck, check out the Embed Troubleshooting documentation.
If something seems fishy on Wistia’s side of things, you can always check out our Status Page for more information about what might be going on. Still no luck? Contact us. We’d be more than happy to help you out!
Social Sharing
Would you like to share your videos on social media platforms like LinkedIn, Facebook, and Twitter? You’re in luck! To learn more about doing that with Wistia, check out the Social Sharing page.