<!DOCTYPE html>
<html  ng-app="vpModule" ng-controller="VPController">
<head>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=1200">
   <meta name="msvalidate.01" content="AF86D6C94D0294C6DCFF4C02777B9787" />
   
   <link rel="stylesheet" href="/st/css/main.css">
   <link rel="stylesheet" href="/st/css/common.css">
   
   <link rel="stylesheet" href="https://vjs.zencdn.net/4.5/video-js.css">
   
   <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script  src="/st/js/o/easing.js"></script>
   
   <link rel="apple-touch-icon" sizes="57x57" href="/st/fav/apple-touch-icon-57x57.png">
   <link rel="apple-touch-icon" sizes="114x114" href="/st/fav/apple-touch-icon-114x114.png">
   <link rel="apple-touch-icon" sizes="72x72" href="/st/fav/apple-touch-icon-72x72.png">
   <link rel="apple-touch-icon" sizes="144x144" href="/st/fav/apple-touch-icon-144x144.png">
   <link rel="apple-touch-icon" sizes="60x60" href="/st/fav/apple-touch-icon-60x60.png">
   <link rel="apple-touch-icon" sizes="120x120" href="/st/fav/apple-touch-icon-120x120.png">
   <link rel="apple-touch-icon" sizes="76x76" href="/st/fav/apple-touch-icon-76x76.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/st/fav/apple-touch-icon-152x152.png">
   <meta name="apple-mobile-web-app-title" content="Videopixie">
   <link rel="icon" type="image/png" href="/st/fav/favicon-196x196.png" sizes="196x196">
   <link rel="icon" type="image/png" href="/st/fav/favicon-160x160.png" sizes="160x160">
   <link rel="icon" type="image/png" href="/st/fav/favicon-96x96.png" sizes="96x96">
   <link rel="icon" type="image/png" href="/st/fav/favicon-16x16.png" sizes="16x16">
   <link rel="icon" type="image/png" href="/st/fav/favicon-32x32.png" sizes="32x32">
   <meta name="msapplication-TileColor" content="#ffffff">
   <meta name="msapplication-TileImage" content="/st/fav/mstile-144x144.png">
   <meta name="application-name" content="Videopixie">
   
   
   
   <title>Tips for creating effective pre-roll ads</title>
   <meta name="description" content="What are some effective techniques to use when making your own pre roll ads? Which approaches allow you to concisely deliver your message to your audience?">
   <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
   <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="/st/css/content.css">
   <meta property="fb:app_id" content="257876044244230" /> 
   <style>
      
   </style>
   
   <!-- Twitter Card data -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:site" content="@videopixie">
   <meta name="twitter:title" content="Tips for creating effective pre-roll ads">
   <meta name="twitter:description" content="What are some effective techniques to use when making your own pre roll ads? Which approaches allow you to concisely deliver your message to your audience?">
   <meta name="twitter:creator" content="@videopixie">
   <meta name="twitter:image:src" content="https://s3.amazonaws.com/our.s3.videopixie.com/landing/">

   <!-- Open Graph data -->
   <meta property="og:title" content="Tips for creating effective pre-roll ads" />
   <meta property="og:type" content="article" />
   <meta property="og:url" content="https://www.videopixie.com/tips-for-successful-ad" />
   <meta property="og:image" content="https://s3.amazonaws.com/our.s3.videopixie.com/landing/" />
   <meta property="og:description" content="What are some effective techniques to use when making your own pre roll ads? Which approaches allow you to concisely deliver your message to your audience?" /> 
   <meta property="og:site_name" content="Videopixie" />
   <meta property="fb:admins" content="594398981" />   


      
   <link href='//fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
   <link href='//fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
   
   <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-animate.min.js"></script>
   
   <script>
      window.SES={};
      SES.is_dev_enviro = false;
      SES.coupon_unavailable = false;

      var vpModule = angular.module('vpModule', ['ngAnimate',]);
       
   </script>
   
  
   
   <script src="/st/build/vjs.4.5.min.js"></script>
   
   <!--
      <script type="text/javascript" src="/st/build/vjs-extra.concat.js"></script>
   -->
   <script  src="/st/build/vjs-extra.min.js"></script>
   
   <script  src="/st/js/o/common.js"></script>
   <script  src="/st/js/c/VPController.js"></script>
   <script  src="/st/js/c/DirectivesCommon.js"></script>
   <script  src="/st/js/c/MediaModalController.js"></script>
   <script  src="/st/js/c/EditorProfileController.js"></script>
   <script>
      
   var log = VPL('HomePageController');
      
   
   vpModule.controller('HomePageController', ['$scope', 'comm', '$http', 
      function($scope, comm, $http){
      
         $scope.mediaClick = function(id, evt, _options, size){
         
            log.d('mediaClick', _options);

            var content = $(evt.currentTarget).children('.about').eq(0).html()
            var options = _options || {}
            
            comm.broadcast(VP.SHOW_MEDIA,{
               mode: (content ? VP.SIDEBAR_MODES.HTML_MODE : VP.SIDEBAR_MODES.ASSET_MODE),
               htmlSidebarContent: content,
               mediaData: {
                  bucket: options.bucket || "our.s3.videopixie.com/examples/",
                  provider: options.provider || "",
                  provider_id: id,
                  file_extension: 'mp4', 
                  hasWebm: true,
                  overlays: options.overlays || null,
                  format: options.format || null
               },
               size: size
            });
         };
         
         $scope.homepageVideo = function(id,evt){
         
            $scope.mediaClick(id, evt, {
               bucket: 'our.s3.videopixie.com/video/',
               format: '704p'
            },
            {
               width: 1024,
               height: 576,
               media_width: 1024,
               media_height: 576
            });
         }
         
         
         $scope.$watch('MediaModal',function(isPlaying){
         
            window.isPlayingVideo = !!isPlaying;
         });
         
         
         $scope.registerNew = function(){
         
            var path = '/register/new';
            
            if (!$scope.registerNewEmailAddress || $scope.registerNewEmailAddress.length < 3){
               return;
            }
            
            var data = {
               email_address: $scope.registerNewEmailAddress,
               type_context: SES.type_context || ''
            };
            
            $scope.registerNewPending = true;
            $scope.registerNewErrorMsg = null;
           
            $http.post(path, data).then(
               function registerNewSuccess(response){
                  log.d('SUCCESS', path);
                  $scope.registerNewComplete = true;
                  $scope.registerNewPending = false;
               },
               function registerNewError(response){
                  log.d('ERROR', path, response);
                  $scope.registerNewErrorMsg = response.data.error.human;
                  $scope.registerNewPending = false;
               }
            );
            
         
         }

         
         
      }]);
      
      
      
      $(document).ready(function(){
         $('.click-proxy').click(function(evt){
         
            var id = $(evt.currentTarget).attr('click-proxy');
            //console.log('click-proxy', id);
            $('#'+id).triggerHandler('click');
            
         });
         
         (function(d, s, id) {
           var js, fjs = d.getElementsByTagName(s)[0];
           if (d.getElementById(id)) return;
           js = d.createElement(s); js.id = id;
           js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=257876044244230";
           fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));
      
      });

   </script>

   
   <!-- start Mixpanel -->
   <script type="text/javascript">
    (function(c,a){window.mixpanel=a;var b,d,h,e;b=c.createElement("script");
    b.type="text/javascript";b.async=!0;b.src=("https:"===c.location.protocol?"https:":"http:")+
    '//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';d=c.getElementsByTagName("script")[0];
    d.parentNode.insertBefore(b,d);a._i=[];a.init=function(b,c,f){function d(a,b){
    var c=b.split(".");2==c.length&&(a=a[c[0]],b=c[1]);a[b]=function(){a.push([b].concat(
    Array.prototype.slice.call(arguments,0)))}}var g=a;"undefined"!==typeof f?g=a[f]=[]:
    f="mixpanel";g.people=g.people||[];h=['disable','track','track_pageview','track_links',
    'track_forms','register','register_once','unregister','identify','alias','name_tag',
    'set_config','people.set','people.increment','people.track_charge','people.append'];
    for(e=0;e<h.length;e++)d(g,h[e]);a._i.push([b,c,f])};a.__SV=1.2;})(document,window.mixpanel||[]);
    mixpanel.init("5f3d14b1f63c57b8546c6c7f095ae4b2");
   </script>
   <!-- end Mixpanel -->
   
   
   <script type="text/javascript" src="/st/js/v/ses_mixpanel.js"></script>
   
   <!--[if lt IE 7.]>
      <script defer type="text/javascript" src="st/pngfix.js"></script>
   <![endif]-->
   
   <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-42918769-1', 'videopixie.com');
      ga('require', 'displayfeatures');
      ga('send', 'pageview');
      
      var referrerCookieName = 'vpFirstReferrer';
      if (!readCookie(referrerCookieName)){
         var ref = document.referrer || 'empty';
         createCookie(referrerCookieName , ref ,365*2);
      }
   </script>
  
   
    
   
  
</head>
<body class="VP"  ng-controller="HomePageController">
   
   <div id="header">
      <a href="/"><img id="logo" src="/st/images/logo_text_and_pixie.png" alt="Videopixie"></a>
      <a id="phone" href="tel:1 800 510 6570">1 (800) 510-6570</a>
      
      
      
         
         <a href="/sign-in"><div class="button blue">Sign in</div></a>
         
         
      
      
      
      <a class="right-link" href="/pricing">Pricing</a>
      <a class="right-link" href="/video-school">Video School</a>
      <a class="right-link browse-link browse-link-first" href="/videographers">Videographers</a>
      <span class="link-spacer">|</span>
      <a class="right-link browse-link" href="/video-animators">Animators</a>
      <span class="link-spacer">|</span>
      <a class="right-link browse-link" href="/video-editors">Browse:&nbsp; Video editors</a>
      
   </div>
   
   
   

<div id="fb-root"></div>

<div class="hero" style="background-image: url('https://s3.amazonaws.com/our.s3.videopixie.com/landing/school-tables.jpg')">
   
   <div class="header_top_bar">
      <div class="blog_title">
         <a href="/video-school">Video School</a>
      </div>
   </div>

</div>
   
<div class="content_container">
  
   <div class="fixed_width">
      <div class="left_column">
         
         <div id="main_content_column">
            
            <h1>Tips for creating effective pre-roll ads</h1>
            <div class="author_container">
               By Thomas Escourrou
            </div>
            <div class="date_container">
               Sep 10th, 2014
            </div>
           
            
            
            <div class="content">
               <p>What are some effective techniques to use when making your own pre roll ads? Which approaches allow you to concisely deliver your message to your audience? To answer these questions, it often helps to look at successful examples for inspiration. Below we detail some commonly used techniques employed by the advertising industry to deliver more effective pre rolls. After having articulated your goals and key messages, start imagining which style/format may work for your project.</p>



<h2>A page from Super Bowl 2014 - surprise and inferred greatness</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('WycoJMKzXZ4',
         $event,{
              provider:'youtube',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://img.youtube.com/vi/WycoJMKzXZ4/hqdefault.jpg');"></div>
         <div class="overlay"></div>
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>Go Daddy ads are usually grating and provocative. But this year their Super Bowl ad won general acclaim. What's so great about it, you ask? Its noteworthiness is derived from two frequently used techniques: surprise and inferred greatness. “Surprise” alludes to exactly what you would expect. Immediately capture the viewer’s attention start with a surprising sight, something you don't expect, or don't see often.  Inferred greatness refers to the viewer’s ability to ascertain the benefits of Go Daddy without them being explicitly announced. This is an important difference between an ad and an explainer video. An explainer video will usually go to great lengths to describe a product in deep detail; an ad, on the other hand, relies on subtly and cleverness to deliver its message</p>


<h2>Long form is ok - but you have 5s to connect</h2>

<div class="thumbnail-wrapper large" ng-click="mediaClick('frog',
         $event,{
              provider:'',
              bucket: 'our.s3.videopixie.com/examples/'
         })">
         <div class="thumbnail" style="background-image:url('https://s3.amazonaws.com/our.s3.videopixie.com/examples/frog_qtp.jpg');"></div>
         <div class="overlay"></div>
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>

<p>With Youtube Trueview, the days of fixed-length ad spots are over. Therefore, the onus is on ad creators to hook the viewer’s interest within the first 5 seconds. Otherwise the ad will be skipped. If advertisers can keep viewers attention for the first five seconds, there are distinct advantages to using long form. For example, a longer form ad is more <a class ="grey-link" href = "https://buzzsumo.com/blog/long-form-content-improves-content-marketing-conclusion-7-recent-studies/">likely</a> to be shared.</p>

<p>As the boundaries between advertisements and content are blurred, don’t be afraid to invest in the creation of advertisements that are worth watching. High-quality, compelling content has always been, and continues to be, the most straightforward and full proof way of attracting viewers.</p>

<h2>The golden age of series - in advertising too</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('06ofMrHy85Q',
         $event,{
              provider:'youtube',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://img.youtube.com/vi/06ofMrHy85Q/hqdefault.jpg');"></div>
         <div class="overlay"></div>
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>Often the persuasiveness of your ad can be amplified by being couched in a larger campaign. The campaign has a motif that directs the message and tone of individual advertisements within the series. Additionally, the ads may all have the same visual style.</p>

<p>For example, Lumosity launched a series of ads (like the one above) to appeal to their broad user base. The ads all have the same visual branding (hand-drawn illustrations when they were still cool). They portray young, happy users making brain-training relevant to 30-somethings, not just grandpas. The ads ran on the Lumosity homepage, Youtube Trueview, and in retargeting campaigns.</p>

<h2>Be yourself - your ideal self that is!</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('71045197',
         $event,{
              provider:'vimeo',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://i.vimeocdn.com/video/444497102.webp?mw=960');"></div>
         <div class="overlay"></div>         
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>In a video ad, your brand is on display every second of it.  Cyclemon is all about design and their promo video represent their ethos through and through.  Visual consistency is very important.</p>


<h2>High production value is more affordable than you think</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('w9Sx34swEG0',
         $event,{
              provider:'youtube',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://img.youtube.com/vi/w9Sx34swEG0/hqdefault.jpg');"></div>
         <div class="overlay"></div>
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>"Coin" hits it out of the park, and got a tons of shares with this video, probably without breaking the bank.  It's become a lot easier now to incorporate visual FX and motion graphics.  In fact, as <a class="grey-link" href="https://www.videopixie.com/post-production-tips-for-youtubers">production quality goes up on youtube</a> ads have to blend in.</p>

<h2>Ad augmented with motion graphics and visual FX</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('73874423',
         $event,{
              provider:'vimeo',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://i.vimeocdn.com/video/448087558.webp?mw=960');"></div>
         <div class="overlay"></div>         
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>Again an example of ad using motion graphics to tell a better story.  East West Bank shows what their clients are able to do and achieves a modern competent visual identity at the same time.</p>


<h2>When to use animation?</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('68228385',
         $event,{
              provider:'vimeo',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://i.vimeocdn.com/video/440457392.webp?mw=960');"></div>
         <div class="overlay"></div>         
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>Do you have an idea that would be exceedingly difficult and expense to implement in real life? This is when animated ads can have the effect of unchaining one’s creativity. Animation can achieve the most compelling special effects, presented in the most unrestrained environments, and is devoid of logistical worries. In this hotel ad - the mix of 3D animations and hand drawn lines give this dreamy magical feel, which is very difficult to achieve in live action only.</p>

<h2>The right content for your goal</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('76730837',
         $event,{
              provider:'vimeo',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://i.vimeocdn.com/video/451663451.webp?mw=960');"></div>
         <div class="overlay"></div>         
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>What is your goal, Brand Awareness perhaps? How long should the ad be? These can all be answered by keeping the goal of your advertising campaign in mind. For brand awareness, you'll probably want something short and surprising, as in the ad above, where the element of surprise is both visual (not an image you see every day) and humorous.
In terms of length, 15-second advertising placements can be effective if the aim is to persuade consumers to take action or change how a brand is perceived. However, a 30 second ad is more appropriate for conveying a more complicated or emotionally substantive message.</p>



<h2>Retarget with your homepage video - worth a try!</h2>
<div class="thumbnail-wrapper large" ng-click="mediaClick('2LBYdBJKDEg',
         $event,{
              provider:'youtube',
              bucket: ''
         })">
         <div class="thumbnail" style="background-image:url('https://img.youtube.com/vi/2LBYdBJKDEg/hqdefault.jpg');"></div>
         <div class="overlay"></div>
         <img class="arrow"     src="/st/images/white-arrow.png">
</div>
<p>For retargeting, the right content to show is usually a well-executed explanation of your service, eg. your homepage video (as in this Crowdtilt example).  Usually the retargeting video is a bit longer (1 min) but with Trueview the economics still work.</p>
            </div>
           
         </div>
      </div>
      
      <div class="right_column">
         
         <div class="sidebar_content_width sidebar_cta_box">
            <h5>Get a video</h5>
            <a class="stay_white" href="http://www.videopixie.com/start">
               <div class="button">Try it free</div>
            </a>
             
         </div>
         
         <div class="sidebar_content_width sidebar_social">
         
            <div class="sidebar_title_line"></div>
            
            <p class="sidebar_title">Follow us</p>
            
            <div class="social-links">
               <div class="social-links-center">
                  <a class="social-link twitter" href="http://www.twitter.com/videopixie">t</a>
                  <a class="social-link facebook" href="http://www.facebook.com/videopixie">f</a>
                  <a class="social-link google" href="http://www.google.com/+videopixie">g+</a>
               </div>
            </div>
         
         </div>
         
        
         
         <div class="sidebar_content_width">
            
            <div class="sidebar_title_line"></div>
            <p class="sidebar_title">Related</p>
            <a class="related" href="https://www.videopixie.com/create-kickstarter-video">
               <img style="width:100%" src="https://s3.amazonaws.com/our.s3.videopixie.com/landing/kickstarter-hero-picobrew.jpg">
               <span >How to make a kickass kickstarter video?</span>
            </a>
            <a class="related" href="https://www.videopixie.com/how-to-use-stock-footage-in-pitch-videos">
               <img style="width:100%" src="https://s3.amazonaws.com/our.s3.videopixie.com/landing/stock-footage.jpg">
               <span >How to use stock footage in pitch videos?</span>
            </a>
            
         </div>   
         
         
         
         
      </div>
   </div>   
   
   <div class="fixed_width">
      <div class="left_column">
      
         <div class="social" id="social">
            <div class="social_buttons">
               <div class="fb-like va" data-href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.videopixie.com%2Ftips-for-successful-ad" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
               <div class="g-plusone va" data-size="medium" data-annotation="none"></div>

               <script type="text/javascript">
                    (function() {
                     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                     po.src = 'https://apis.google.com/js/platform.js';
                     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                    })();
               </script>

               <a href="https://twitter.com/share" class="twitter-share-button va" data-count="none">Tweet</a>
               <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
            </div>
            
         </div>

         <div class="fb-comments" data-href="https://www.videopixie.com/tips-for-successful-ad" data-width="100%" data-colorscheme="light"></div>
      
      </div>
   </div>
      
   
  
</div>




<script>
   try {
      var pageName = 'tips-for-successful-ad';
      SES.type_context = '';
      var pageVersion = 5;
      var propertiesForMixpanel = {};
      propertiesForMixpanel[pageName + "_version"] = pageVersion;
      
      SES.track({
         event_name:'viewed_content_page',
         p:propertiesForMixpanel,
         details:'viewed_page='+pageName+';',
         should_not_post_event_to_internal:true
      });   
      
   } catch (e) {
      log.d("error logging to mixpanel");
   }   

   $(document).ready(function(){   
   
      var cta = $('#cta_dynamic');
      if (!cta.length){ return; }
      var didScroll = false;
      var $window = $(window);
      var ctaBottom = cta.height() + cta.offset().top;
    
      $window.bind('scroll.cta', function() {
          didScroll = true;
      });
       
      var clearer = setInterval(function() {
         if ( didScroll ) {
            didScroll = false;
              
            if ($window.height() + $window.scrollTop() > ctaBottom){
               cta.animate({opacity: 1.0});
               clearInterval(clearer);
               $window.unbind('scroll.cta');
               
               setTimeout(function(){
               
                  cta.animate({right: '20px'}, 200, function(){
                     cta.animate({right: 0}, 200);
                  });
               }, 500);
            }
         }
      }, 250);
   });





try{
   createCookie('vp_coupon', '', 180);
} catch(e){

}
















</script>



   
   <div id="footer">
      
      <div class="content">
         <img id="footer-logo" src="/st/images/logo_text_and_pixie.png" alt="videopixie logo">
         
         <div id="footer-left">
            <a href="/im_a_pro">Sign-up as a Professional</a>
            <a href="/video-production">Browse Video Producers</a>
            <a href="/learn-more">Learn More</a>
            <a href="/pricing">Pricing</a>
         </div>
         
         <div id="footer-left">
            <a href="/video-school">Video School</a>
            <a href="/about">Our Team</a>
            <a href="/jobs">Jobs</a>
            <a href="/faq">FAQ</a>
         </div>
      
         <div id="social-links">
            <a target="vp_facebook" href="//www.facebook.com/videopixie" class="facebook social-box">f</a>
            <a target="vp_twitter" href="//www.twitter.com/videopixie" class="twitter social-box">t</a>
            <a target="vp_google" href="//www.google.com/+videopixie" class="google social-box">g+</a>
            <a target="vp_linkedin" href="//www.linkedin.com/company/videopixie" class="linkedin social-box">in</a>
         </div>
         
         <div id="footer-bottom">
            <span>Copyright 2015 TT Labs Inc.</span>
            <a href="/st/privacy.html">Privacy Policy</a>
            <a href="/st/dmca.html">DMCA</a>
         </div>
      
      </div>
      
      
      
   </div>
  
   
   
   <div id="media-modal" class="modal modal-wrapper video-modal dn" vp-size="size" vp-fade="[[MediaModal]]" vp-closeable="MediaModal"  ng-controller="MediaModalController">
<!--vp-fade-but-leave-in-display="MediaModal" -->

   <div id="media-background" vp-width-by-aspect="[[aspectRatio]]"></div>
   <div id="image-wrapper"
      ng-class="{ontop: imageViewerMode, small_hide: !imageViewerMode}"
      vp-img-child="src: '[[imageSrc]]', valid: true">
      <!--img is inserted by vp-img-child -->
   </div>
   <div id="player-wrapper" ng-class="{small_hide: imageViewerMode}">
      <video id="video-element" class="video-js vjs-default-skin" controls ng-controller = "VideoPlayerController"></video>
      <div id="video-overlay" ng-bind-html="overlayHtml">
         
      </div>
   </div>
   
   <div id="sidebar-wrapper">
      
      <div ng-show="mode.design_mode" ng-controller="DesignSideBarController" class="side-bar designSideBar"><!-- Design Mode -->
         
         <div class="font-14-999 fr">[[currentQuestion.name]]</div>
         <div class="currentOptionWrapper clearfix">
         
            <div class="option clearfix"
               ng-click="onCurrentOptionClick()"
               ng-class="{selected:currentOption.selected}"
               vp-hover-exclusion="not-hot">
               <div class="mainRow fl">
                  <div class="thumbnailWrapper fl" 
                     vp-img-child="src: '[[AWS + mediaData.bucket + currentOption.video.provider_id]]' + '_120h.jpg', valid: [[!!currentOption.video.provider_id]]">
                     <!--img is inserted by vp-img-child -->
                     
                  </div>
                  <div class="font-16-666-b optionName fl">[[currentOption.name]]</div>
                  <div class="ok"></div>
               </div>
               <div class="font3 details fl">[[currentOption.details]]</div>
            </div>
            
         </div>
         
         <div class = "otherOptionsWrapper">
            
            <div class="bar"></div>
            <div class="font4 subtitle">Other [[currentQuestion.name]] options:</div>
            <div class="vp-scroll-bar vp-scroll-shadows scroll-wrapper">
               <div class="option clearfix" 
                  ng-repeat="(optionIdx,option) in currentQuestion.options" 
                  ng-hide='optionIdx == currentOptionIdx || option.hidden || option.renderer == "lengthInput"'
                  ng-class="{clickable:option.video.provider_id}"
                  ng-click="onOtherOptionClick(optionIdx)">
                  
                  <div class="thumbnailWrapper fl"
                     vp-img-child="src: '[[AWS + mediaData.bucket + option.video.provider_id]]' + '_120h.jpg', valid: [[!!option.video.provider_id]]">
                     <!--img is inserted by vp-img-child -->
                     
                     <div class="no-example" ng-hide="option.video.provider_id">No example</div>
                  </div>
                  <div class="font3 optionName">[[option.name]]</div>               
               </div>
            </div>
         </div>
         
      </div>
      
      <div ng-show="mode.html_mode" class="html-side-bar side-bar">
      
         <div ng-bind-html="htmlSidebarContent"></div>
      
      </div>
         
      
   </div>
   <div class="x close"></div>
</div>

   
   <div class="dimmer dn" vp-fade="[[Dimmer]]" vp-match-document-height></div>
   
   <div id="fb-root"></div>
      
   
   <!-- begin olark code -->
   <script data-cfasync="false" type='text/javascript'>
   /*<![CDATA[*/
   if(!SES.is_dev_enviro){
      window.olark||(function(c){var f=window,d=document,l=f.location.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
      f[z]=function(){
      (a.s=a.s||[]).push(arguments)};var a=f[z]._={
      },q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
      f[z]("call",n,arguments)}})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
      0:+new Date};a.P=function(u){
      a.p[u]=new Date-a.p[0]};function s(){
      a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,false):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
      hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTagName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
      return setTimeout(ld,100)}a.P(1);var j="appendChild",h="createElement",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d[h]("iframe"),g="document",e="domain",o;n.style.display="none";m.insertBefore(n,m.firstChild).id=z;b.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
      b.src="javascript:false"}b.allowTransparency="true";v[j](b);try{
      b.contentWindow[g].open()}catch(w){
      c[e]=d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{
      var t=b.contentWindow[g];t.write(p());t.close()}catch(x){
      b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
      loader: "static.olark.com/jsclient/loader0.js",name:"olark",methods:["configure","extend","declare","identify"]});
      /* custom configuration goes here (www.olark.com/documentation) */
      olark.identify('3567-618-10-4944');
   }/*]]>*/
   </script>
   <noscript><a href="https://www.olark.com/site/3567-618-10-4944/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
   <!-- end olark code -->
   
  
   
   <!-- Google Code for Remarketing Tag -->
   <!--------------------------------------------------
   Remarketing tags may not be associated with personally identifiable information or placed on pages related to sensitive categories. See more information and instructions on how to setup the tag on: http://google.com/ads/remarketingsetup
   --------------------------------------------------->
   <script type="text/javascript">
   /* <![CDATA[ */
   var google_conversion_id = 993449120;
   var google_custom_params = window.google_tag_params;
   var google_remarketing_only = true;
   /* ]]> */
   </script>
   <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
   </script>
   <noscript>
      <div style="display:inline;">
         <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/993449120/?value=0&amp;guid=ON&amp;script=0"/>
      </div>
   </noscript>

   
   <script type="text/javascript">
      (function() {
         window._pa = window._pa || {};
         // _pa.orderId = "myOrderId"; // OPTIONAL: attach unique conversion identifier to conversions
         // _pa.revenue = "19.99"; // OPTIONAL: attach dynamic purchase values to conversions
         // _pa.productId = "myProductId"; // OPTIONAL: Include product ID for use with dynamic ads
         var pa = document.createElement('script'); pa.type = 'text/javascript'; pa.async = true;
         pa.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + "//tag.perfectaudience.com/serve/53dac13adc92cfda2d000130.js";
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(pa, s);
      })();
   </script>
   
</body>
</html>
