How to embed a background video on your webpage

A background video or 'hero' video can be found on many webpages to enhance the visual appearance of the content. They usually appear at the top of the page, but could be located anywhere where an inline 'video loop' makes sense.

Vidyard's embed codes are primarily suited to show a player with controls such as play and pause, but a background video is designed to continue to loop with no audio and ideally not send analytics.

The solution is to use a custom iframe code for this type of experience (currently not shown in the Vidyard UI).

For a basic version of the embed code, use the following. Replace UUID with the valid UUID of your video:

<iframe src="//play.vidyard.com/UUID/type/background" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true"></iframe>

If you require the video to be responsive, you can add the following to the page. Note that you may need to tweak the 'max-width' and 'max-height' values to reflect the page layout when you are looking at the content on a browser with a high resolution/zoomed out.

Replace UUID with the valid UUID of your video:

<style type="text/css">
.innerContainer {
position: relative;
display: block;
width: 100% !important;
height: 0;
padding: 56.25% 0 0 0;
max-width: 1470px;
}
.outerContainer {
max-height: 827px;
}
iframe {
position: absolute;
top: 0;
left: 0;
max-width: 1470px;
max-height: 827px;
width: 100% !important;
height: 100% !important;
margin: 0 auto !important;
}
</style>
<div class="outerContainer">
<div class="innerContainer">
<iframe src="//play.vidyard.com/UUID/type/background" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true"></iframe>
</div>
</div>