Video embedding is an act where the viewers place your video on their site. Furthermore the audience on these foreign sites can do the same. The video can spread "like a virus". The terms "viral" and "viral marketing" originate from this concept. In Flowplayer this feature is enabled by default.
How it works?
When the end user clicks the embed icon by default the following HTML code is offered:
This can be pasted into any website's source code, and the player will work in place. The embed code has the following features:
- The flowplayer is placed inside a SCRIPT tag - unless
embedis configured to use an IFRAME - and upon page load the SCRIPT tag is replaced by the player.
- The setup is minimal without splash screens or custom tweaks.
- The script loads following the files: jQuery, flowplayer.js, Google Analytics and flowplayer skin only if they are not present on the embedding page. They are loaded from trusted CDN's and cannot be modified by any party.
- Player dimensions are taken from the video file or if not present the original player dimensions are used.
- If Google Analytics is enabled the embedded players will also track to your Analytics account.
- Embedded players can be further embedded.
How it looks?
Custom logo and returning visitors
In the commercial version you can supply an absolute URL of your logo:
By default the logo will be displayed in the bottom left corner of the embedded
players. When the user clicks the logo she will be redirected to the originating
page on your site. The same applies to the
brand field in the controlbar if
set. Please refer to the documentation on
commercial configuration for details.
The embedding extension provides the
player option. The option can be applied in two ways,
depending on the type of its specified value:
|embed||Boolean||If set to |
|embed||Object||Provides all options to fine tune the embedding feature.|
As a boolean
embed is used to turn off off the embedding feature.
For example you can prevent the embed offer for all players on the page in the global configuration:
The boolean version can also be applied in HTML syntax as
to specific VIDEO tag based installations.
By default the embed feature loads the embed script and Flowplayer assets from
our CDN. This can be customized in the
embed configuration object if you
prefer to host the files yourself.
When specified as object
embed accepts the following properties:
|height||Height of embedded player. Default is responsive, but useful in conjunction when the iframe option is set.|
|iframe||URL of IFRAME used for embedding.|
|library||//releases.flowplayer.org/6.0.0/flowplayer.min.js||URL of the Flowplayer API library script.|
|playlist||False||Whether the current playlist is embedded or the current clip.|
|script||//embed.flowplayer.org/6.0.0/embed.min.js||URL of the embed script.|
|skin||//releases.flowplayer.org/6.0.0/skin/minimalist.css||URL of skin for embedding.|
|swf||//releases.flowplayer.org/6.0.0/flowplayer.swf||URL of SWF file for embedding.|
|swfHls||//releases.flowplayer.org/6.0.0/flowplayerhls.swf||URL of Flash HLS SWF file for embedding.|
|width||100%||Width of embedded player. Default is responsive, but useful in conjunction when the iframe option is set.|
The global configuration is a good place to configure embedding because it applies to all players on your page. Example:
Note: The locations must not be paths but full URLs.
This way you can for instance propagate your own customized skin.
Ideally you want to make all required Flowplayer assets available via both the
https: protocols. As with the default locations this can be
achieved by simply omitting the protocol from the URL - as long as the files are
available at that location via both protocols. If not you should use a secure
location because modern browsers become ever stricter when it comes to loading
from insecure locations into a secure page.
Offering an IFRAME for embedding allows to propagate more involved setups. Check out the quality selector demo, and try its embed code.
IFRAMEs are not responsive, therefore the embed
default to width and height of the video.
- Tip Configure an additional height
of at least
3pxto accomodate vertical space for the slim timeline below the player while the controlbar is hidden or for the controlbar height if the player has fixed controls, and on the IFRAME page add
overflow: hiddenCSS rules to avoid scrollbars around the embedded player.
In conjunction with HLS you should set both
height explicitly to avoid dependence on the dimensions of the first
resolution picked for playback.
The embedding extension provides the following API method:
|embedCode()||Returns the complete embed code offered by this player. |
Note that this method therefore cannot return the API.