Age Verification with JW Player

As long as our player has been around, we have received requests from our customers asking for the ability toage gatetheir users. This feature presents users with an age verification prompt requiring them to enter their birthday. If the users are older than the required age, they are granted access to watch the video (i.e. video playback starts). If they are younger than the required age, they are taken to a different page and are unable to view the video. It is a simple, but useful feature to restrict underage viewers from mature content. Although this isn’t an out-of-the box point & click feature in the JW Player, it is possible to achieve this feature with some JavaScript, an iFrame, and our JavaScript API.

How to do it

First, set up the JW Player, with our JavaScript API, to load an iFrame when the player is ready. The age verification demo will only let a user watch the content if they are 18 years of age or older. If they are meet the requirements, we set a cookie so that they won’t get the age verification prompt on a repeat visit. However, if they do not meet the age requirement, a cookie is set to prevent them from attempting to fill out the form again.

Into the Code

The above demo can be seen as a standalone pagehere. Below is the breakdown of the JavaScript code that is used. First, a basic player set up, like we always have. We include a WebM video so Firefox can play in HTML5 mode:

jwplayer("player").setup({
  playlist: [{
    image: "http://content.bitsontherun.com/thumbs/i8oQD9zd-640.jpg",
    sources: [{
      file: "http://content.bitsontherun.com/videos/i8oQD9zd-kNspJqnJ.mp4"
    },{
      file: "http://content.bitsontherun.com/videos/i8oQD9zd-27m5HpIu.webm"
    }]
  }]
});

Next, the iFrame will be placed over the player during jwplayer().onReady:

jwplayer().onReady(function() {
                if (jwplayer().getRenderingMode() == "html5"){
                    var theBody = document.getElementById(player.id);
                } else {
                    var theBody = document.getElementById(player.id+"_wrapper");
                }
                var el = document.createElement("iframe");
                el.setAttribute('name', 'ifrm');
                el.setAttribute('id', 'ifrm');
                el.style.height = jwplayer().getHeight()+"px";
                el.style.width = jwplayer().getWidth()+"px";
                el.style.position = "relative";
                if (jwplayer().getRenderingMode() == "flash"){
                    el.style.marginTop = -jwplayer().getHeight()+"px";
                    el.style.top = "-10px";
                }
                el.style.zIndex = "999";
                el.setAttribute('frameBorder', '0');
                el.style.textAlign = "center";
                el.scrolling = "no";
                el.setAttribute('src', 'iframe.html');
                theBody.appendChild(el);
            });

This will create an iFrame on top of our player called iframe.html, which takes up the entire width and height of the player. This iFrame contains all of the code to make the age verification work. A direct link to the iFrame used ishere. You can view the source of this page for the complete code used here, feel free to add to it / modify it as you see fit!

Wrapping Up

As you see, it is quite easy to add the age verification feature toJW Player 6. Feel free to use the demo in this blog post and adjust it as you see fit. The default value for the minimum age is 18, and both cookies expire after an hour — so both of these can be changed, as well as the styling of the form itself. A direct link to this demo is availablehere. Please let us know if you have any questions or if you have built a cool integration that you wish to show off, comments are welcome, happy embedding!