The act of adding your video to a webpage is called embedding. Embedding allows you to seamlessly share video on a page without viewers having to leave your site.
As long as you can access and edit the source code of a webpage, you can embed a video.
The number of videos that you can embed depends on your subscription plan with Vidyard (for example, 5 embeds for Vidyard Free, 20 for Pro, etc).
Copy a video embed code
- Select the Share button next to a video in your library
- Switch the toggle ON to make the video embeddable
- Enabling the embed toggle will count the video against your plan's allotment of embeddable videos (5 for Vidyard Free, 20 for Pro).
- Select Copy Code
Paste the embed code into your website's HTML editor to add the video to the page.
Advanced embed options
Users that belong to an account with the Starter, Professional or Enterprise plan can do more with video embed codes, like choose between an inline and lightbox video, define a fixed embed size, or use an iframe embed code.
- Open the share options for a video from your library
- Click on the </> button to open the embed options
- Switch in the toggle ON to make the video embeddable
- Select an embed option to share your video, then click on Copy Code
Inline embeds
The inline embed is your standard, go-to embed code to add a video to your webpage. An inline embed displays the video directly on the webpage and allows your viewer to continue to browse the surrounding content.
The inline embed is automatically responsive and will conform to the dimensions of its container on the page. To adjust the dimensions of the video, you can either change the size of the parent container or set a max width and height for the video in Vidyard.
Lightbox embeds
The lightbox embed allows you to present your video as the focal point of the page. When the viewer clicks on the thumbnail, the lightbox embed loads your video in the center of the screen, dimming all other elements on the page.
Both the thumbnail and the video component itself are automatically responsive.
- If you want to use specific dimensions, you can set a max width and height for the video thumbnail to adjust its size on the page
- Because the video component itself takes up the majority of the page when the video plays, it will comfortably respond to the dimensions of the browser window as it changes size.
iframe embeds
Sometimes the standard inline embed runs into problems when you try to add a video to a webpage or application (for example, a CMS) that does not support javascript.
The iframe embed acts as a great fallback option. An iframe allows you to display the video on the page from an external source, bypassing the restrictions on in-page javascript.
However, there are some drawbacks to the iframe embed. The iframe may limit Vidyard's ability to pass video analytics to any integrated marketing automation tools, such as Marketo, HubSpot, Eloqua and Pardot. You also cannot use the javascript Player API with the iframe.
- Select the Share button next to a video in your library
- Click the </> button to open the embed options
- Select the More Options tab, then click on Copy iFrame Code.
You can adjust the dimensions of the iframe by changing the height= and width= values in the source code.
<iframe class="vidyard_iframe" src="//play.vidyard.com/uuid.html?" width="640" height="360" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
Share video in an email campaign
Email is a great way to share video and connect with your audience. Use this embed option to quickly add a hyperlinked video thumbnail into your email marketing campaign and capture identified viewer engagement data in Vidyard from the recipients on your list.
Learn more about email marketing and Vidyard.
Share your video's embed options with someone else
Not everyone who you work with may have access to your video library. That's why we've provided you with an easy way to share the embed options for a video with others—no login to Vidyard required.
- Open the share options for a video from your library, then select the More Options tab
- Click on Copy Link
- Share the link with a project partner or colleague
