Whether it be media clips, projects or channels: your video content can be shared with your audience by embedding the Blue Billywig player on your website.
The majority of our customers use the Javascript or iframe embed type. The examples below show a Javascript as well as an iframe embed code:
Javascript:
<script type="text/javascript" src="https://yourcompanyname.bbvms.com/p/default/c/4354721.js" async="true"></script>
Iframe:
<iframe onload="this.src += '#!referrer='+encodeURIComponent(location.href) + '&realReferrer=' + encodeURIComponent(document.referrer)" src="https://yourcompanyname.bbvms.com/p/default/c/4354721.html?inheritDimensions=true" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowFullscreen oallowFullscreen msallowFullscreen allowfullscreen allow="autoplay; fullscreen" ></iframe>
Iframe embeds are often used to meet strict security requirements imposed by the website’s content management system. If this is the case, iframes are perfectly fine to serve video content to your viewers.
Iframe embeds do however pose some restrictions for you to consider. Although some of these restrictions can be evaded by adding extra properties or scripts, we would recommend using Javascript embeds.
In the following paragraphs we will go over the ways that Javascript or iframe embedding affects the following aspects of the player:
- Responsiveness
- Fullscreen support
- Statistics logging
- Autoplay
- Security
- 360 video
- Video SEO
1.0 | Responsiveness
1.1 | What is responsiveness?
‘Responsiveness’ refers to how a player (or any web page element) responds when its parent element is resized. Simply put: on a ‘responsive’ website, the size of the content is dependent on the size of the browser window.
Having a responsive website ensures that the content has the proper size on every screen size: desktop, laptop, tablet as well as mobile devices.
On most responsive websites, we would also want the video player to respond to the size of the element it is placed in. Player responsiveness can be enabled in the playout settings. Learn more about the playout settings for setting the player’s appearance and sizing.
It’s important to note that the player doesn’t necessarily have to be responsive. As such it’s perfectly possible to set fixed player dimensions (for example: a 720px width and 403px height). This means that even when the ‘parent’ element is resized, the player will keep the same width and height.
1.2 | Javascript/iframe and responsiveness
How does the embed type (Javascript or iframe) affect the player’s responsiveness? When using the Javascript embed type, the player will handle its own resizing. As a result, no additional styling is needed to resize the player along with its parent elements.
However, when embedding the player using an iframe, the player is not allowed to change the size of its ‘own’ iframe. This means that the width and height are to be specified in the iframe HTML element itself or in the styling of the parent page.
When copying an iframe embed code from the OVP, a default 720px width and 405px height is applied. For example:
Therefore, to make an iframe responsive, extra styling is needed on the web page. An example setup with a responsive iframe can be found here: https://codepen.io/bbsupport/pen/KKvrrYw
2.0 | Fullscreen
Viewers can watch video content in fullscreen mode by clicking the fullscreen button in the control bar:
Learn more about the control bar settings.
2.1 | Fullscreen support: Desktop, Android and iOS
Fullscreen is fully supported on desktop and Android mobile devices, for both Javascript as well as iframe embeds.
However, iOS mobile devices don’t fully support fullscreen. On iOS fullscreen is only available for displaying regular (non-interactive) video content. This means that fullscreen is not supported for iframe embedded content (interactive or non-interactive) as well as Javascript embedded content containing interactive elements.
Fullscreen support
| Javascript (lineair / non-interactive video) | Javascript (interactive video) | Iframe (lineair / non-interactive video) | Iframe (interactive video) | |
| Desktop | Yes | Yes | Yes | Yes |
| Android (mobile) | Yes | Yes | Yes | Yes |
| iOS (mobile) | Yes | No* | Yes | No** |
* Fullbrowser alternative (for javascript embedded interactive video): if fullscreen support is unavailable for javascript embedded interactive video, the player will attempt to apply a “fullbrowser” alternative. This means the player will try to fill the entire browser window.
** Fullbrowser alternative (for iframe embedded interactive video): if fullscreen support is unavailable for iframe embedded interactive video, a “fullbrowser” command can only be facilitated by adding additional Javascript code to your page. Learn more about fullbrowser fallback.
Example view of fullbrowser on iPhone:
2.2 | Iframe fullscreen attributes
When using iframe embeds, we strongly recommend using the iframe embed codes generated by the Online Video Platform (OVP). These embed codes contain the relevant attributes to support the fullscreen feature:
<iframe onload="this.src += '#!referrer='+encodeURIComponent(location.href) + '&realReferrer=' + encodeURIComponent(document.referrer)" src="https://yourcompanyname.bbvms.com/p/default/c/4354721.html?inheritDimensions=true" width="720" height="405" frameborder="0" webkitallowfullscreen mozallowFullscreen oallowFullscreen msallowFullscreen allowfullscreen allow="autoplay; fullscreen" ></iframe>
When constructing your own custom iframe, make sure you include the proper attributes to enable fullscreen. The properties in the example above can be used as reference:
- webkitallowfullscreen
- mozallowFullscreen
- oallowFullscreen
- msallowFullscreen
- allowfullscreen
- allow=”autoplay; fullscreen”
Some content management systems might strip attributes that were manually added to iframes. Inspect the source code to assess if all attributes are actually applied. Contact support@bluebillywig.com if you’d like one of our support team members to assist you.
3.0 | Statistics logging
The Blue Billywig player logs many statistics that are useful for analysing viewer behaviour. Examples of the collected statistics are: device type, browser, city, the webpage that the video is viewed on, etc.
Due to the restrictions of iframes, the metrics web domain/address (where the content is played) and referring web domain/address (the page where the viewer came from) are less accurate compared to Javascript embeds.
4.0 | Autoplay
The Blue Billywig player can be configured to ‘autoplay’. In other words; the player starts playing as soon as the video content is loaded.
To enable autoplay for iframe embeds, make sure to include an extra property in the iframe element:
- allow=”autoplay;”
This property is included by default when using the iframe embed code generated by the OVP.
Even when embedding with Javascript, browsers have different policies when it comes to allowing media content to autoplay. Learn more about browser behaviour and autoplay settings.
5.0 | Video SEO
The Blue Billywig player supports JSON-LD tagging. In a nutshell: JSON-LD provides structured data that helps search engines to better understand the content of your page, resulting in a better (video) SEO.
When using JavaScript embeds, a JSON-LD block is injected in the <head> section of the page, whereas iframe embeds will cause the JSON-LD block to be injected in the <head> section of the iframe.
As a result, using JavaScript embeds improves SEO for video as well as your overall web content.
To illustrate: JavaScript embedded content enable your video content to appear in the “Video” Google search results:
On the other hand, iframe embedded content doesn’t show up in the Google Video search results.
6.0 | Security
The Blue Billywig player is in full compliance with the standards laid out by ISO 27001. Nevertheless, some content management systems might not allow their users to place third party Javascript script tags (<script>).
In this case using an iframe is a good alternative.
When the iframe and the parent page are from different domains, the iframe doesn’t have access to the parent page’s CSS styles, DOM, etc. Essentially the browser treats the parent page and iframe like two separate browser windows.
7.0 | 360 video
360 video enables viewers to look around by changing the angle of the video.
On desktop devices the embed type does not affect 360 video behaviour. Viewers can change their perspective by clicking and dragging the player canvas regardless of a Javascript or iframe embed placement.
On mobile devices the embed type does affect the behaviour of 360 video. When using a Javascript embed code, viewers can change their viewing direction by moving their device accordingly. However, when using an iframe, the device’s motion and orientation properties are not accessible. As a result, mobile users are only able to look around by swiping the screen (as is the case on desktop devices).