Install the Optimizely integration for video files (Version 11) – Mediaflow Knowledge Base

The integration allows web editors to directly access videos from Mediaflow inside the Optimizely 11 interface and embed videos both in blocks and in the text editor (TinyMCE).

All video in streamed from Mediaflow, not from the Optimizely webserver and will not affect the web servers storage and data traffic.

Settings in Mediaflow

The integration with Optimizely can be used as soon as it is installed. However, for the files to be available and optimally used, administrators need to prepare the settings for them in Mediaflow first.

Install the integration for videos

Step 1: Get NuGet packages

Mediaflow's integration is a standard NuGet installation. Optimizely has its own NuGet feed that needs to be added to find the plugin. Instructions on how to do this can be found here: https://nuget.optimizely.com/feed/.

Once the feed is added, you can search for the integration inside Visual Studio.

There are two NuGet packages available, the main package and a package only needed if you use TinyMCE.

Mediaflow.Video.Plugin: for inserting video in blocks and pages
Mediaflow.Video.TinyMCEplugin: for inserting video inline in the rich text editor (requires TinyMCE).

For more information and the latest version, you can also visit Optimizely's page:

https://nuget.optimizely.com/?q=mediaflow

Step 2: Install the NuGet packages

Use Optimizely’s standard NuGet installation process.

Step 3: Connect Mediaflow and Optimizely

Note:

If you have an existing installation of a Mediaflow integration, this setting is already configured and you can skip this step.

The following lines should be automatically inserted under configuration > appSettings in your configuration file web.config.

<add key="MFPKey" value="" />

The value for MFPKey can be found in Mediaflow in the integration settings for the Optimizely integration.

https://app.mediaflow.com/settings/integrations

You need to have the correct permissions to view the integration settings. If they are not available, you can enter superadmin mode or contact a Mediaflow administrator in your organisation.

Once the Nuget packages have been installed and MFPKey has been entered, you can now click on the "Insert video from Mediaflow" button when you are editing text.

Step 4: Add code for inserting video into blocks

The NuGet package does not include a pre-made block but offers a property that you can easily add to your own blocks and pages. The standard "Mediaflow Video" property provides a regular video played by the Mediaflow media player.

Use the following code to add the media player as a property:

using Mediaflow.Video.Plugin;
...

  [BackingType(typeof(PropertyMediaflowVideo))]
  [UIHint("MFVideo")]
  public virtual MediaflowVideo video1 { get; set; }

Step 5: Add code for inserting video as background video (optional)

Apart from the standard "Mediaflow Video" block you can also add a "Mediaflow Background Video" block that provides an HTML player that is muted and looped, suitable for use as a design element on the page.

Use the following code to add the HTML player as a property:

using Mediaflow.Video.Plugin;
...

[BackingType(typeof(PropertyMediaflowBackgroundVideo))]
[UIHint("MFBackgroundVideo")]
public virtual MediaflowBackgroundVideo video2 { get; set; }

@using Mediaflow.Video.Plugin
@model MediaflowBackgroundVideo

<div>
    @Html.Raw(Model.EmbedCode)
</div>

@Html.PropertyFor(x => x.CurrentPage.Video, new { CssClass = "row equal-height",
tag = Global.ContentAreaTags.FullWidth })