Social Media

Video Advertising: Tips, how to play and pause YouTube videos on scroll and story behind Adele’s Hello

A lot of start-up advertisers and enthusiasts ask me about importance of video advertising. Recently, I met one friend who wanted to embed video ads in his app and website, the kind of ads you see on Gaana.com or auto play videos on Facebook which auto start and pause when you scroll.

Businesses also ask what kind of videos will work for their business. Here are few tips.

  1. Shorter is better – watch trailer before you go for movie

    length-matters-2
    Video length significantly determines how many people are going to watch your video. Just like you prefer to watch movie’s trailer before planning to spend 2 hours to watch entire movie, people prefer to watch 30 seconds trailer about your business, if they like the trailer they will definitely watch 30 mins video about your business and maybe turn to your loyal customers.

  2. Quality of video – short creative motivating story

    After length its quality of video that you are putting on your website or app. A short creative story that motivates customers to go for your business rather than other players in market is the key.
    online-video-marketing

  3. Viral – market your video using various channels

    This is one term that is viral over internet. I remember when people used to share videos over email, when YouTube was not there. “The Spirit of Christmas” was distributed over email and it led to creation of adult comedy animation series “South Park”. Now you have got lot of channels like YouTube, Facebook, Twitter and other social media platforms. Utilize them well.
    going-viral007

I feel, video advertising is in huge demand right now but there is no inventory. There are a lot of online tools that you can use to create good videos for your business. I am pasting small list here.

Now let’s go core technical and play and pause a YouTube video on scroll.

  1. In your script tag load the iframe Player API code asynchronously 
    var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var <span class="mceItemHidden" data-mce-bogus="1"><span class="hiddenSpellError" pre="var " data-mce-bogus="1">firstScriptTag</span></span> = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  2. after the API code downloads, create a YouTube Player 
    var player;
function <span class="mceItemHidden" data-mce-bogus="1"><span class="hiddenSpellError" pre="function " data-mce-bogus="1">onYouTubeIframeAPIReady</span></span>() {
player = new YT.Player('player', {
height: '390',
width: '640',
<span class="hiddenSpellError" pre="" data-mce-bogus="1">videoId</span>: '<span class="hiddenSpellError" pre="" data-mce-bogus="1">769SeL9QiFw</span>',
events: {
'<span class="hiddenSpellError" pre="" data-mce-bogus="1">onReady</span>': <span class="hiddenSpellError" pre="" data-mce-bogus="1">onPlayerReady</span>,
'<span class="hiddenSpellError" pre="" data-mce-bogus="1">onStateChange</span>': <span class="hiddenSpellError" pre="" data-mce-bogus="1">onPlayerStateChange</span>
}
});
}
  3. On player ready set window.onscroll to check for video position on scroll 
    function <span class="mceItemHidden" data-mce-bogus="1"><span class="hiddenSpellError" pre="function " data-mce-bogus="1">onPlayerReady</span></span>(event) {
window.onscroll = function() {<span class="hiddenSpellError" pre="function " data-mce-bogus="1">checkIfToPlayVideo</span>()};
}
  4. Check scroll position and play pause video 
    function <span class="mceItemHidden" data-mce-bogus="1"><span class="hiddenSpellError" pre="" data-mce-bogus="1">checkIfToPlayVideo</span></span>(){
if(window.pageYOffset>200){
player.playVideo();
}
else if(window.pageYOffset<200){
player.pauseVideo();
}
//console.log(window.screenY);
}
  5. Add div that will get replaced by YouTube iframe 
    

&amp;lt;div style="height:&lt;span class="mceItemHidden" data-mce-bogus="1"&gt;&lt;span class="hiddenSpellError" pre="" data-mce-bogus="1"&gt;800px</span></span>;position:relative;"&gt;&amp;<span class="hiddenSpellError" pre="" data-mce-bogus="1">nbsp</span>;
<h1>Scroll down to play Video</h1>



<div id="player"></div>


<div style="height:800px;position:relative;">&nbsp;
<h1>Scroll to top to pause Video</h1>
</div>

    Great, you created Facebook like video experience. You can manipulate viewport based on your requirements. You can also check live demo here.

    Story behind Adele’s latest hit ‘Hello’–

    There were rumours that Adele wrote this song after her breakup. As per her official interview if she would have written ‘Hello’ for her lost love it would be full of pain. But this video was not intended to be on ‘dark side’. The other side is not dark. There was a girl in her 20’s going through bad phase and people called her immature, emotionally stable on social media and compared her to Taylor Swift and there is a mature lady writing from a place out of her comfort zone and singing ‘Hello from the other side’.

    Happy Advertising and Coding! Enjoy ‘Hello’ in demo.

Image copyrights
http://wistia.com/
http://emarketingblog.nl
http://crispvideo.com