Help Center
Searching...
  1. Home
  2. Content Management
  3. Embedding
  4. Embedding

Embedding


Contents

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

  • Media clips
  • Playlists
  • Channels
  • Projects

1.0 | Generate an embed code

To generate an embed code:

  • In the Media Library, go to Media clip, Playlist, Channel or Project
  • Navigate to the “Embed” tab
  • Select an embed type for your content. The available embed types are:
    • Javascript
    • Iframe
    • URL
    • AMP
    • oEmbed
    • SCORM

    (See below for embed type examples)

embed types

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

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>

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>

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

Read more on the how JavaScript embedding is different from iFrame embedding.

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
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 users 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>

2.5 | oEmbed

For advanced users 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 clip 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 URL 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 URL 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 | SCORM

(For advanced users 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).

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 embedcode to override specific settings to avoid creating multiple playouts that only differ on a few settings.

You can use playout override parameters on embedcodes of media clips, playlists and projects.

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. In stead 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. In stead 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 embedcode URL as a query string (find the embedcode URL in the embedcode 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 parameterValueDescription
fullScreenShow / HideShow or hide the fullscreen button. e.g. fullScreen=Hide
castButtonShow / HideShow or hide the cast button. e.g. fullScreen=Hide
tNumber in secondsStart the player at a specific second. e.g. t=10  (to start at 0:10) or t=122 (to start at 2:02)
authorCopyrightShow / HideShow or hide the author and copyright details on the start screen. e.g. authorCopyright=Show
authorCopyrightPauseShow / HideShow or hide the author and copyright details on the pause screen. e.g. authorCopyrightPause=Show
authorCopyrightHoverShow / HideShow or hide the author and copyright details on hover. e.g. authorCopyrightHover=Show
authorCopyrightEndShow / HideShow or hide the author and copyright details on the end screen. e.g. authorCopyrightEnd=Show
shareButtonShow / HideShow or hide the share button on the start screen. e.g. shareButton=Hide
shareButtonPauseShow / HideShow or hide the share button on the pause screen. e.g. shareButtonPause=Hide
shareButtonHoverShow / HideShow or hide the share button on hover. e.g. shareButtonHover=Hide
shareButtonEndShow / HideShow or hide the author and copyright details on the end screen. e.g. shareButtonEnd=Hide
autoPlaytrue / falseStart playing video content automatically at player load. e.g. autoPlay=true
autoLooptrue / falseLoop video content. e.g. autoLoop=true
noStatstrue / falseAvoid stats logging (in test settings). e.g. noStats=true
Tagged:

Was this article helpful?

Yes No
Contact Support
Can't find the answer you're looking for?
Contact Support