Rich-text Reply

Optimizely / HTML5 Video play/pause button issue

himynameisivo 12-08-15

Optimizely / HTML5 Video play/pause button issue

Hi guys,

 

I'm trying to test a new content area where I use html5 video as a background as opposed to our standard mood images.

 

The html/css part is done and it plays well on all screen sizes.

 

 

HTML

 

<div id="test-video">
<video autoplay id="bgvd" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>
  <source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm">
  <source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>

  <div class="span4 offset4">hi</div>
</div>

CSS

 

 

#test-video {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#test-video video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#test-video div {
    position: relative;
    z-index: 1;
}

.test-content {
  padding-top: 200px;
  padding-bottom:200px;
}

 

 

Now comes the part where I'm stuck. I'm trying to make that button pause/unpause the video but it just doesn't work.

 

i tried a few js code variations, but every time i use addEventListener in the global javascript, it says its null, so I assume by the time this JS is running, the element still does not exist?

Performance Marketing Manager @ Blacklane
Founder @ Stereofox

robertchan 12-08-15
 

Re: Optimizely / HTML5 Video play/pause button issue

The following's all within the variation code area.

 

Start with setting a console log on your button to determine whether it's shooting on time like so:

 

YOURBUTTONCODE

console.log("All is well with the button timing");

 

If you're not seeing the message, add a time out like so:

 

setTimeout(function() {

YOURBUTTONCODE;

}, 5000);

 

If you're on a premium account, you can place your button code into the Conditional Activation to check that the button exists before everything runs.

 

Finally, if things are still not working, you might need to scope everything out to window.

Robert Chan

Experimentation Hero

Re: Optimizely / HTML5 Video play/pause button issue

Hi Robert,

 

Thanks for the reply!

 

I'm using the timeout function to hide the FOOC, but in this particular case I found other solution. I'm just adding the javascript wrapped in <script> brackets when I insert the video container. Then it works like a charm.

 

 

If someone's curious, I can share the final results and how it looks.

 

best,

Ivo

Performance Marketing Manager @ Blacklane
Founder @ Stereofox