Inline embeds place a media player directly where you want it on your page. The tried-and-true style of embedding, inline videos can be watched at the embedded size or opened in fullscreen.
Inline is the best option for making videos prominent and visible on your pages, which is ideal for accessibility and video SEO. Wistia's inline embeds also provide the most flexibility when it comes to embed types, customizations, and embed options.
Inline embed types
The inline embed comes in two versions:
Standard
Fallback (iframe)
The player will look and function the same with both types, as the differences are mostly on the technical side.
We recommend trying the Standard embed, but the Fallback can be useful if you encounter any difficulty embedding the Standard on your page.
Standard embed
The Standard is Wistia’s most modern embed type, utilizing JavaScript to render the video player directly on your page.
Standard embeds boast certain technical benefits over a traditional iframe embed, such as faster time-to-ready and avoiding iframe-specific issues that can interfere with certain features.
Example: Inline (Standard) embed, fixed size
<script src="//fast.wistia.com/embed/medias/gmwg9g412y.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_gmwg9g412y" style="height:349px;width:620px"> </div>
Example: Inline (Standard) embed, 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%;">
<div class="wistia_embed wistia_async_lqy5p1741e seo=false videoFoam=true" style="height:100%;position:relative;width:100%">
<div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/lqy5p1741e/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" />
</div></div></div></div>
Fallback (iframe)
The Fallback is an iframe embed, a more ‘classic’ way of embedding. The name "fallback" speaks to its reliability in places where more modern embed codes aren't supported.
An iframe, or ‘inline frame’, allows you to embed one webpage within another, displaying content from a different source directly on your page. So rather than directly embedding the media player on your page via JavaScript, it is loaded on a separate page and then displayed in the iframe, which makes it load a bit slower. To the viewer, it will look identical to a Standard embed.
The iframe approach to embedding has been around for a long time, so if your CMS or site builder doesn’t play nicely with the more modern Standard embed, try the Fallback instead.
Example: Inline (fallback) embed, fixed size
<iframe src="https://fast.wistia.net/embed/iframe/76s5twgvtw?seo=true&videoFoam=false" title="Lenny's Halloween Costume Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" msallowfullscreen width="620" height="349"></iframe>
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>
Inline embed sizing
Inline embeds can be set to a fixed size or resize responsively to fit any container.
Fixed Size
Specify exact dimensions for your embed with Fixed Size. The media player will always display at this size, giving you precise control over how it appears on your page.
Responsive
The most flexible sizing option, responsive embeds will resize dynamically to fit the container, browser window, or screen.
Responsive sizing ensures your content looks great on all screen sizes, from desktop monitors to mobile phones, and most modern websites and site templates are designed responsively.
No need to worry about the dimensions, just select responsive sizing, copy the embed code, and paste it into your page. You can control or restrict the size of the player by adjusting the width of its parent container, but avoid modifying the embed code or player CSS styles directly.
The Wistia player is width-responsive, adjusting based on changes in width to its parent container or page.
Other options
Use oEmbed URL
oEmbed is a popular format that simplifies embedding by using URLs instead of HTML code. This option can be used on platforms with Wistia oEmbed support.
Inject SEO Metadata
With this option, the media player will deliver SEO metadata to your webpage immediately upon loading to get your content indexed in video search results. Optimize your media metadata in Wistia by editing the title, adding a detailed description, selecting a thumbnail, and adding a transcript. The metadata will be updated automatically with any edits.
Advanced Embed Customization
For even more flexibility and control of inline embeds, check out the resources below:
Embed Options and Plugins provide a whole new layer of embed-specific customization and functionality.
The JavaScript Player API enables developers to build custom player functionality with premade methods and events.