Help Center
Searching...
  1. Home
  2. Content Management
  3. Embedding
  4. Embedding (media clips, playlists, projects and channels)

Embedding (media clips, playlists, projects and channels)


Contents

Embedding refers to placing video content on your website rather than merely linking to it. Use the embed option in the Online Video Platform (OVP) to place content on your website. This includes embedding:

  • Media clips
  • Playlists
  • Channels
  • Projects

1.0 | Generate an embed code

To generate an embed code:

  • Select the media clip, playlist, channel or project in the Media Library
  • 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).

embedding playout selection

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

Some content management systems (CMS) don’t allow direct placement of Javascript/iframe embed codes. Instead they might construct their ‘own’ iframe based on a URL that can be generated in 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).

Tagged:

Was this article helpful?

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