3 Foolproof Ways to Get Visitors for Your Promotional Video

sales video header image

Imagine spending tens of thousands of dollars developing your sales funnel, website, copy writing, and video and then it not being available to visitors or even discouraging them from buying from you! If you don’t format and serve your promotional video correctly, it may not play for your visitors, throw security warnings, or even create a lack of trust with you website.

We built the Abundance campaign largely using video so it was very important our video displayed correctly to as many people as possible. We used video to encourage our visitors to opt-in to our campaign. We provided free content to build value with our customers through video. We used video to sell them on additional products beyond the book. Being we were selling products on our website, we made the entire domain secure. Doing this showed the lock symbol in the address bar as well as a green bar in some browsers like in the image below:

abundance video player screenshot

If your site does not use SSL/HTTPS, one of the easiest and most reliable ways to serve video is using a service like YouTube or Vimeo. However, if your site does have SSL/HTTPS, the YouTube embedded player can lead to some major problems. In the Abundance campaign, we quickly noticed the embedded YouTube player was causing mixed-content warnings, and that causes the SSL trust icon in the browser location bar to become a warning icon. Even worse, it can result in the video not displaying or popup warnings like this:

mixed content security warning screenshot

The mixed-content warning icon or popup can make visitors concerned and think the site has security issues. They could decide it’s not safe to purchase or take any action on the website, which has a negative effect on your conversion rates and sales.

If your website/sales funnel has SSL/HTTPS, it’s time to move up to an HTML5 player wrappers like MediaElementJS.

Of course there are many JavaScript wrappers for the native HTML5 video player and they all have pros and cons. At the time of this article, they are all very similar. The benefits of using a JavaScript video player wrapper are:

  • Cross platform and browser video compatibility
  • The ability to use SSL/HTTPS without mixed content warnings
  • Total control over player events, capabilities and attributes

We will go over the 3 steps to setting up your video to display correctly with a secure site on multiple browsers and devices.

1. Promotional Video Formats

Like everything on the web, this is always changing. Currently there are a few formats that result in nearly 100% cross platform compatibility when combined properly.

  • WebM
  • MP4
  • Ogg (ogv)
  • FLV (flash)
  • YouTube feed URL

You can request these from your video team or you can create these formats yourself using YouTube Video Manager. If you choose the latter, simply upload your AVI or other original video format to your YouTube account. You will notice that YouTube Video Manager uploads the video, then it tells us it will take X minutes until the video will be totally available on the web. During this time, YouTube is automatically creating WebM, MP4 and FLV versions of our video.

If you want to create the video formats yourself, there are lots of applications that do it. Most of them are built on top of the open source swiss army knife ffmpeg. FFMpeg is a very stable and well maintained command line tool that can convert and modify all types of audio and video files.

For this article, we will assume the YouTube Video Manager was used to create the required video formats. To retrieve the videos from YouTube, go get this command line tool: youtube-dl. http://rg3.github.io/youtube-dl/

Youtube-dl polls YouTube for all the formats available when given the YouTube video URL. Copy a YouTube URL and give it to youtube-dl like this (use Terminal or Command Line):

$>youtube-dl –list-formats http://www.youtube.com/watch?v=PHf9GupmgVU

For the Fitz and the Tantrums video URL above, youtube-dl tells us about the available formats and sizes:

[youtube] Setting language
[youtube] PHf9GupmgVU: Downloading video webpage
[youtube] PHf9GupmgVU: Downloading video info webpage
[youtube] PHf9GupmgVU: Extracting video information
Available formats:
37	:	mp4	[1080x1920]
46	:	webm	[1080x1920]
22	:	mp4	[720x1280]
45	:	webm	[720x1280]
35	:	flv	[480x854]
44	:	webm	[480x854]
34	:	flv	[360x640]
18	:	mp4	[360x640]
43	:	webm	[360x640]
5	:	flv	[240x400]
17	:	mp4	[144x176]

There are a lot of formats and sizes to choose from, but for most web applications, the 360×640 versions of the webm, mp4 and flv are the best choice. Note: the flv format was not found to particularly useful in our testing, but its very possible for older platforms it will be used.

Now use youtube-dl to download and save the required formats:

$>youtube-dl -f 43 http://www.youtube.com/watch?v=PHf9GupmgVU

This command downloads the 360×640 WebM format of the video. Repeat the command for all the formats required.

2. Set up the HTML5 video player

For most JavaScript wrappers like mediaelement.js, the HTML uses a standard HTML5 video tag. Here is an example of the snippet used on the 6 Major Insights page of the Abundance campaign:

[code language=”html”] <video id=”media-element-video” width=”585″ height=”333″>

<source src=”/ab/wp-content/uploads/2013/06/AX-bBKbfX5o.webm” type=”video/webm” />

<source src=”/ab/wp-content/uploads/2013/06/AX-bBKbfX5o.flv” type=”video/flv” />

<source src=”https://www.youtube.com/watch?v=AX-bBKbfX5o” type=”video/youtube” />

</video>
[/code]

The HTML5 video tag is a great design. It allows for multiple sources, so the platform/browser can choose a compatible video format. In a perfect world, we could just use this HTML5 player and assume the videos would always work the same way for everyone. Of course, nothing is ever this simple and the browser HTML5 player by itself is very basic. To be certain we get support for all possible platforms, we add a JavaScript wrapper / layer like mediaelement.js. MediaElement.js covers all our requirements and is very easy to use. MediaElement.js also provides the information needed to install, configure and extend the player.

Let’s get started.

Download the latest package and install it following the how-to. Here is a quick review of the method we used to install the player. In our WordPress theme functions.php, we called the wp_enqueue methods to include the javascript and css.

[code language=”php”] wp_enqueue_script(‘mediaelement’,
‘/js/mediaElement/build/mediaelement-and-player.min.js’,
null,null,true);

wp_enqueue_style( ‘mediaelement-css’,
‘/js/mediaElement/build/mediaelementplayer.min.css’,
array(), NULL, ‘screen’ );
[/code]

Now we need to add the JavaScript that will actually render the player on top of our HTML5 video tag:

[code language=”js”] if( $(‘#media-element-video’).length > 0 ){

$(‘#media-element-video’).mediaelementplayer({
enableAutosize: true,

iPadUseNativeControls: true,

pauseOtherPlayers: true,

success: function(media, node, player) {

$(‘#’ + node.id + ‘-mode’).html(‘mode: ‘ + media.pluginType);

media.play();
}
});
}
[/code]

This configures the player to auto play when it’s ready. To see all the capabilities of MediaElement.js check out the site: http://mediaelementjs.com/#installation

If you aren’t getting the results you want, try different combinations of the attributes and options.

In our testing, we still had issues with the MediaElement.js player, primarily because of a nasty bug in IE and how it handles choosing video formats. Thankfully, we found a fix.

3. The Fix for IE and iOS

It shouldn’t be a surprise that supporting Internet Explorer and iOS (Apple mobile) would be a challenge. However we found a way. First lets describe the problem. Internet Explorer doesn’t work well with mp4 video format. iOS requires both webm and mp4 to be present. So, the same bit of code will not work for both platforms. In our testing, almost all platforms used the webm video format so the other video formats (FLV or youtube fallback) were there for older platforms. So we still have the issue of Internet Explorer behaving badly when mp4 was included as a source. And of course, mp4 is a requirement for iOS devices to work properly.

Below is the code that decides if the video/mp4 is added as a source tag to the HTML5 we created. This was the only way we could get IE and iOS devices to play nicely.

[code language=”php”] /**
Check the user agent string for iphone or ipad
*/
$userStr = strtolower($_SERVER[‘HTTP_USER_AGENT’]);
$isIpad = false;
$isIpad = (bool) strpos($userStr,’ipad’);

$isIphone = false;
$isIphone = (bool) strpos($userStr,’iphone’);

/**
If it is an iOS device, add the mp4 video source tag
*/
if($isIpad || $isIphone){

echo join(array(‘
<script type=”text/javascript”>// <![CDATA[
var videoId = $(‘.videoId’).attr(‘title’);

document.write(‘<source src=”/ab/wp-content/uploads/2013/’ + videoId + ‘” type=”video/mp4″ />’
);’,

// ]]></script>’
));
}
[/code]

Now we have a video player that supports a ton of platforms and browsers. Most importantly, it delivers all the content without mixed content warnings.

abundance video player screenshot 2

We hope this tutorial saves you some $$$ by helping you increase your conversions. Please share your results and questions below in the comments!

Build Your Email List By 100K This Year Using Quizzes

Get Started

Build Your Email List By 100K This Year Using Quizzes

Get Started