Age Gate Video Capabilities

Hi @227brimichelle,

It’s not something that you can do “out of the box”, but it is possible with some code, here’s how I’d do it, in your functions.php

add_filter('age_gate_before', function ($content) {
    $content .= '<div class="age-gate-background-video"><video muted autoplay loop src="your/file.mp4" /></div>';

    return $content;
}, 1);

Then just a bit of CSS to position it:

.age-gate-background-video {
  position:  fixed;
  width:  100vw;
  height:  100vh;
  top:  0;
  left:  0;
  z-index:  -1;
}

.age-gate-background-video video {
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

I think a video background would be a pretty cool feature so I might add it as an option in a future release.

Hope this helps,

Thanks
Phil

Thanks.

@227brimichelle,

How did the video work out on your agegate? Did it work out? I would like to see it and possibly try it myself. Please notify how exactly you did it.

Thanks

Hi,

We did implement this and it is working very well. We did exactly what Phil suggested.
check it out: https://www.tweakeddistilling.com

The only issue we are running into is that the MP4 that we are loading is very large and and on cell networks this causes the page load to run an unacceptably long time.

@philsbury, I think for the purpose of our web site we want to disable loading the video on small screens/mobile devices. Do you have any suggestions? I think I understand how to do this in Javascript, but not really understanding WP, don’t know what the best approach is.

Thanks!

• This reply was modified 4 years, 3 months ago by maurora.