Embedding

Contents

Add your video content to your website by embedding it. You can use the OVP to generate HTML embed codes for:

Media clips
Playlists
Channels
Projects
Shorts

1.0 | Generate an embed code

To generate an embed code:

In the Media Library, go to Media clip, Playlist, Channel, Project or Shorts
Click “Preview & embed”

Select an embed type for your content. The available embed types are:
- Javascript
- Iframe
- URL
- AMP
- oEmbed
- JSON
- SCORM
- LTI
(See below for embed type examples)

Select a playout in the dropdown menu (not applicable when embedding Channels or Shorts).

Selectable playouts

The dropdown menu only shows playouts that are ‘active’. If the playout is not listed, make sure it’s not set to ‘inactive’ in the playout settings. Learn more about playouts.

Copy the generated embed code from the text field to use on your website.

Visit our developers section for more advanced developer embedding options

2.0 | Embed types

There are multiple ways to embed your content. Listed below are examples for each embed type.

Embed type selection

The embed type highly depends on the setup of your website. For questions or recommendations, please contact support@bluebillywig.com

2.1 | Javascript

Use the Javascript embed code to place a script on your website that delivers the player and its content on your website.

Media clip Javascript embed code example

<script type="text/javascript" src="https://yourcompanyname.bbvms.com/p/demo_playout/c/5442888.js" async="true"></script>

Playlist Javascript embed code example

<script type="text/javascript" src="https://yourcompanyname.bbvms.com/p/demo_playout/l/1677502954150240.js" async="true"></script>

Channels Javascript embed code example

<script type="text/javascript" src="https://yourcompanyname.bbvms.com/ch/223.js" async="true"></script>

Project Javascript embed code example

<script type="text/javascript" src="https://yourcompanyname.bbvms.com/p/interactive_demo_playout/p/7877.js" async="true"></script>

Shorts Javascript embed code example

<script type="text/javascript" src="https://yourcompanyname.bbvms.com/sh/107.js" async="true"></script>

2.2 | Iframe

Use the iframe embed code to place a standalone HTML element on your website.

Media clip iframe embed code example

<iframe
   onload="this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)"
   src="https://yourcompanyname.bbvms.com/p/demo_playout/c/5442888.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   webkitallowfullscreen
   mozallowFullscreen
   oallowFullscreen
   msallowFullscreen
   allowfullscreen
   allow="autoplay; fullscreen"
></iframe>

Playlist clip iframe embed code example

<iframe
   onload="this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)"
   src="https://yourcompanyname.bbvms.com/p/demo_playout/l/1677502954150240.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   webkitallowfullscreen
   mozallowFullscreen
   oallowFullscreen
   msallowFullscreen
   allowfullscreen
   allow="autoplay; fullscreen"
></iframe>

Channels iframe embed code example

<iframe
   onload="this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)"
   src="https://yourcompanyname.bbvms.com/ch/223.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   webkitallowfullscreen
   mozallowFullscreen
   oallowFullscreen
   msallowFullscreen
   allowfullscreen
   allow="autoplay; fullscreen"
></iframe>

Project iframe embed code example

<iframe
   onload="this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)"
   src="https://yourcompanyname.bbvms.com/p/interactive_demo_playout/p/7877.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   webkitallowfullscreen
   mozallowFullscreen
   oallowFullscreen
   msallowFullscreen
   allowfullscreen
   allow="autoplay; fullscreen"
></iframe>

Shorts iframe embed code example

<iframe
   onload="if (this.src.indexOf('#!referrer=') === -1) this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)"
   src="https://yourcompanyname.bbvms.com/sh/107.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   webkitallowfullscreen
   mozallowFullscreen
   oallowFullscreen
   msallowFullscreen
   allowfullscreen
   allow="autoplay; fullscreen"
></iframe>

Compared to a Javascript embed, using an iframe has some disadvantages with regard to:

Responsiveness
Fullscreen support
Statistics logging
Autoplay
Security
360 video
Video SEO

2.3 | URL

Not all content management systems allow direct placement of Javascript/iframe embed codes. Instead they might construct their ‘own’ iframe based on a URL. For these cases, use the URL generated by the OVP.

Media clip URL embed example

https://yourcompanyname.bbvms.com/p/demo_playout/c/5442888.html?inheritDimensions=true

Playlist URL embed example

https://yourcompanyname.bbvms.com/p/demo_playout/l/1677502954150240.html?inheritDimensions=true

Channels URL embed example

https://yourcompanyname.bbvms.com/ch/223.html

Project URL embed example

https://yourcompanyname.bbvms.com/p/interactive_demo_playout/p/7877.html?inheritDimensions=true

Shorts URL embed example

https://yourcompanyname.bbvms.com/sh/107.html

Iframe attributes

When creating a custom iframe, additional attributes are required to support fullscreen and autoplay (webkitallowfullscreen, mozallowFullscreen, oallowFullscreen, msallowFullscreen, allowfullscreen, allow=”autoplay; fullscreen”).

Additionally, an ‘onload’ attribute is added for more accurate analytics logging (onload=”this.src += ‘#!referrer=’+encodeURIComponent(location.href)+’&realReferrer=’+encodeURIComponent(document.referrer)”)

2.4 | AMP

(For advanced use only)

AMP stands for Accelerated Mobile Pages. AMP pages are optimized for mobile web browsing and intended to help websites load faster.

Media clip AMP embed code example

<amp-iframe
   sandbox="allow-scripts allow-same-origin"
   layout="responsive"
   src="https://yourcompanyname.bbvms.com/p/demo_playout/c/5442888.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   allowfullscreen
   resizable
   referrerpolicy="unsafe-url">
   <div overflow tabindex="0" role="button" aria-label="Expand player">Expand player</div>
</amp-iframe>

Playlist clip AMP embed code example

<amp-iframe
   sandbox="allow-scripts allow-same-origin"
   layout="responsive"
   src="https://yourcompanyname.bbvms.com/p/demo_playout/l/1677502954150240.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   allowfullscreen
   resizable
   referrerpolicy="unsafe-url">
   <div overflow tabindex="0" role="button" aria-label="Expand player">Expand player</div>
</amp-iframe>

Channels AMP embed code example

<amp-iframe
   sandbox="allow-scripts allow-same-origin"
   layout="responsive"
   src="https://yourcompanyname.bbvms.com/ch/223.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   allowfullscreen
   resizable
   referrerpolicy="unsafe-url">
   <div overflow tabindex="0" role="button" aria-label="Expand player">Expand player</div>
</amp-iframe>

Project AMP embed code example

<amp-iframe
   sandbox="allow-scripts allow-same-origin"
   layout="responsive"
   src="https://yourcompanyname.bbvms.com/p/interactive_demo_playout/p/7877.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   allowfullscreen
   resizable
   referrerpolicy="unsafe-url">
   <div overflow tabindex="0" role="button" aria-label="Expand player">Expand player</div>
</amp-iframe>

Shorts AMP embed code example

<amp-iframe
   sandbox="allow-scripts allow-same-origin"
   layout="responsive"
   src="https://yourcompanyname.bbvms.com/sh/107.html?inheritDimensions=true"
   width="720"
   height="405"
   frameborder="0"
   allowfullscreen
   resizable
   referrerpolicy="unsafe-url">
   <div overflow tabindex="0" role="button" aria-label="Expand shorts">Expand shorts</div>
</amp-iframe>

2.5 | oEmbed

For advanced use only. Learn more about oEmbed

Media clip oEmbed embed example

https://yourcompanyname.bbvms.com/oembed/?url=https%3A%2F%2Fyourcompanyname%2Fp%2Fdemo_playout%2Fc%2F5442888.html&width=720&height=405&thumbWidth=720&thumbHeight=405&format=

Playlist oEmbed embed example

https://yourcompanyname.bbvms.com/oembed/?url=https%3A%2F%2Fyourcompanyname.bbvms.com%2Fp%2Fdemo_playout%2Fl%2F1649942816310652.html&width=720&height=405&thumbWidth=720&thumbHeight=405&format=

Channels oEmbed embed example

https://yourcompanyname.bbvms.com/oembed/?url=https%3A%2F%2Fyourcompanyname.bbvms.com%2Fch%2F223.html&width=720&height=405&thumbWidth=720&thumbHeight=405&format=

Project oEmbed embed example

https://yourcompanyname.bbvms.com/oembed/?url=https%3A%2F%2Fyourcompanyname.bbvms.com%2Fp%2Finteractive_demo_playout%2Fp%2F7877.html&width=720&height=405&thumbWidth=720&thumbHeight=405&format=

2.6 | JSON

(For advanced use only)

The JSON embed type is intended for use with the Blue Billywig Native Player SDK. It returns a JSON object containing the player configuration and content metadata, which the SDK uses to initialise the player natively on iOS and Android.

Media clip JSON embed example

https://yourcompanyname.bbvms.com/p/demo_playout/c/5442888.json

Playlist JSON embed example

https://yourcompanyname.bbvms.com/p/demo_playout/l/1677502954150240.json

Channels JSON embed example

https://yourcompanyname.bbvms.com/ch/223.json

Project JSON embed example

https://yourcompanyname.bbvms.com/p/interactive_demo_playout/p/7877.json

Shorts JSON embed example

https://yourcompanyname.bbvms.com/sh/107.json

2.7 | SCORM

(For advanced use only)

SCORM is a framework that enables your e-Learning (LMS) to keep track of how users are progressing.

The OVP offers SCORM packages for mediaclips as well as projects. Download the package and follow your LMS’ instructions on how to place the video content in your e-Learning environment.

The SCORM package functions as a wrapper around our Blue Billywig player and tracks e-Learning completion within the customer’s LMS (Learning Management System).

2.8 | LTI

(For advanced use only)

Learning Tools Interoperability (LTI) is a standard protocol that allows modern Learning Management Systems (LMS) to interact with external applications, such as our video player.

Learn more about LTI.

3.0 | Override player settings

For Intermediate Users

The following section involves editing URLs. While it’s designed to be straightforward, a basic understanding of URL structures will help you make the most of it. If you’re new to this, you might want to check out the Query String Wikipedia page for an overview.

Use playout override parameters on the embed code to override specific settings to avoid creating multiple playouts that only differ on a few settings.

You can use playout override parameters on embed codes of media clips, playlists and projects. Channels and Shorts use a different URL structure and do not support playout override parameters.

3.1 | Examples

Example 1

Your “latest news” page uses the “latest news” playout for all videos. However, you’d like the video to play automatically on one specific page. Instead of using the following embed code:

<script 
   type="text/javascript" 
   src="https://yourcompanyname.bbvms.com/p/latest_news/c/5442888.js" 
   async="true">
</script>

Use the “auto play” parameter (autoPlay) to play the video automatically after page load (autoPlay=true):

<script 
   type="text/javascript" 
   src="https://yourcompanyname.bbvms.com/p/latest_news/c/5442888.js?autoPlay=true" 
   async="true">
</script>

Example 2

Page A features a full video coverage of a sport event. However, page B should start at a specific moment (0:10) in the same video. Instead of using the following embed code:

<script 
   type="text/javascript" 
   src="https://yourcompanyname.bbvms.com/p/sport/c/6104413.js" 
   async="true">
</script>

Use the “time” parameter to start the video at a different time (t=10):

<script 
   type="text/javascript" 
   src="https://yourcompanyname.bbvms.com/p/sport/c/6104413.js?t=10" 
   async="true">
</script>

3.2 | Add playout override parameters

Add one or more parameters to the embed code URL as a query string (find the embed code URL in the embed code src):

https://yourcompanyname.bbvms.com/p/sport/c/6104413.js?t=10
https://yourcompanyname.bbvms.com/p/sport/c/6104413.js?autoPlay=true
https://yourcompanyname.bbvms.com/p/sport/c/6104413.js?autoPlay=true&t=8
https://yourcompanyname.bbvms.com/p/sport/c/6104413.js?autoPlay=true&noStats=true

If you’re new to URL query strings, you might want to check out the Query String Wikipedia page for an overview.

3.3 | Commonly used playout parameters

Virtually all playout settings (that are not “read-only”) can be targeted to override.

The following list contains the most useful playout parameters:

Playout parameter	Value	Description
`fullScreen`	Show / Hide	Show or hide the fullscreen button. e.g. fullScreen=Hide
`castButton`	Show / Hide	Show or hide the cast button. e.g. castButton=Hide
`t`	Number in seconds	Start the player at a specific second. e.g. t=10 (to start at 0:10) or t=122 (to start at 2:02)
`authorCopyright`	Show / Hide	Show or hide the author and copyright details on the start screen. e.g. authorCopyright=Show
`authorCopyrightPause`	Show / Hide	Show or hide the author and copyright details on the pause screen. e.g. authorCopyrightPause=Show
`authorCopyrightHover`	Show / Hide	Show or hide the author and copyright details on hover. e.g. authorCopyrightHover=Show
`authorCopyrightEnd`	Show / Hide	Show or hide the author and copyright details on the end screen. e.g. authorCopyrightEnd=Show
`shareButton`	Show / Hide	Show or hide the share button on the start screen. e.g. shareButton=Hide
`shareButtonPause`	Show / Hide	Show or hide the share button on the pause screen. e.g. shareButtonPause=Hide
`shareButtonHover`	Show / Hide	Show or hide the share button on hover. e.g. shareButtonHover=Hide
`shareButtonEnd`	Show / Hide	Show or hide the share button on the end screen. e.g. shareButtonEnd=Hide
`autoPlay`	true / false	Start playing video content automatically at player load. e.g. autoPlay=true
`autoMute`	true / false	Mute the player at load. Typically used together with autoPlay=true to meet browser autoplay requirements. e.g. autoMute=true
`autoLoop`	true / false	Loop video content. e.g. autoLoop=true
`noStats`	true / false	Avoid stats logging (in test settings). e.g. noStats=true

Tagged: embed code embedding

Was this article helpful?

Yes No

Contact Support

Can't find the answer you're looking for?

Contact Support