{"id":3004,"date":"2013-08-05T04:00:00","date_gmt":"2013-08-05T04:00:00","guid":{"rendered":"http:\/\/jwplayer.com\/age-verification-with-jw-player\/"},"modified":"2023-02-07T14:40:48","modified_gmt":"2023-02-07T19:40:48","slug":"age-verification-with-jw-player","status":"publish","type":"post","link":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/","title":{"rendered":"Age Verification with JW Player"},"content":{"rendered":"<div>\n<p>As long as our player has been around, we have received requests from our customers asking for the ability to<em>age gate<\/em>their 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\u2019t an out-of-the box point &#038; click feature in the JW Player, it is possible to achieve this feature with some JavaScript, an iFrame, and our JavaScript API.<\/p>\n<h2><strong>How to do it<\/strong><\/h2>\n<p>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\u2019t 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. <\/p>\n<\/p>\n<h2>Into the Code<\/h2>\n<p>The above demo can be seen as a standalone page<a href=\"http:\/\/demo.jwplayer.com\/age-gate\/\" target=\"_blank\" rel=\"noopener\">here<\/a>. 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:<\/p>\n<pre>jwplayer(\"player\").setup({<br>  playlist: [{<br>    image: \"http:\/\/content.bitsontherun.com\/thumbs\/i8oQD9zd-640.jpg\",<br>    sources: [{<br>      file: \"http:\/\/content.bitsontherun.com\/videos\/i8oQD9zd-kNspJqnJ.mp4\"<br>    },{<br>      file: \"http:\/\/content.bitsontherun.com\/videos\/i8oQD9zd-27m5HpIu.webm\"<br>    }]<br>  }]<br>});<br><\/pre>\n<p>Next, the iFrame will be placed over the player during jwplayer().onReady:<\/p>\n<pre>jwplayer().onReady(function() {<br>                if (jwplayer().getRenderingMode() == \"html5\"){<br>                    var theBody = document.getElementById(player.id);<br>                } else {<br>                    var theBody = document.getElementById(player.id+\"_wrapper\");<br>                }<br>                var el = document.createElement(\"iframe\");<br>                el.setAttribute('name', 'ifrm');<br>                el.setAttribute('id', 'ifrm');<br>                el.style.height = jwplayer().getHeight()+\"px\";<br>                el.style.width = jwplayer().getWidth()+\"px\";<br>                el.style.position = \"relative\";<br>                if (jwplayer().getRenderingMode() == \"flash\"){<br>                    el.style.marginTop = -jwplayer().getHeight()+\"px\";<br>                    el.style.top = \"-10px\";<br>                }<br>                el.style.zIndex = \"999\";<br>                el.setAttribute('frameBorder', '0');<br>                el.style.textAlign = \"center\";<br>                el.scrolling = \"no\";<br>                el.setAttribute('src', 'iframe.html');<br>                theBody.appendChild(el);<br>            });<br><\/pre>\n<p>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 is<a href=\"http:\/\/demo.jwplayer.com\/age-gate\/iframe.html\" target=\"_blank\" rel=\"noopener\">here<\/a>. 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!<\/p>\n<h2><strong>Wrapping Up<\/strong><\/h2>\n<p>As you see, it is quite easy to add the age verification feature to<strong>JW Player 6<\/strong>. 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 &#8212; so both of these can be changed, as well as the styling of the form itself. A direct link to this demo is available<a href=\"http:\/\/demo.jwplayer.com\/age-gate\/\" target=\"_blank\" rel=\"noopener\">here<\/a>. 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!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3004","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Age Verification with JW Player - JW Player<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Age Verification with JW Player - JW Player\" \/>\n<meta property=\"og:description\" content=\"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. [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/\" \/>\n<meta property=\"og:site_name\" content=\"JW Player\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-05T04:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-07T19:40:48+00:00\" \/>\n<meta name=\"author\" content=\"JW Player\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"JW Player\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/\"},\"author\":{\"name\":\"JW Player\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f\"},\"headline\":\"Age Verification with JW Player\",\"datePublished\":\"2013-08-05T04:00:00+00:00\",\"dateModified\":\"2023-02-07T19:40:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/\"},\"wordCount\":452,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jwplayer.com\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/\",\"url\":\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/\",\"name\":\"Age Verification with JW Player - JW Player\",\"isPartOf\":{\"@id\":\"https:\/\/jwplayer.com\/#website\"},\"datePublished\":\"2013-08-05T04:00:00+00:00\",\"dateModified\":\"2023-02-07T19:40:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jwplayer.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Age Verification with JW Player\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jwplayer.com\/#website\",\"url\":\"https:\/\/jwplayer.com\/\",\"name\":\"JW Player\",\"description\":\"End-to-End Solution for Streaming &amp; Monetizing Video\",\"publisher\":{\"@id\":\"https:\/\/jwplayer.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jwplayer.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jwplayer.com\/#organization\",\"name\":\"JW Player\",\"url\":\"https:\/\/jwplayer.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png\",\"contentUrl\":\"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png\",\"width\":1000,\"height\":417,\"caption\":\"JW Player\"},\"image\":{\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f\",\"name\":\"JW Player\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jwplayer.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g\",\"caption\":\"JW Player\"},\"url\":\"https:\/\/jwplayer.com\/blog\/author\/jw-player\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Age Verification with JW Player - JW Player","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/","og_locale":"en_US","og_type":"article","og_title":"Age Verification with JW Player - JW Player","og_description":"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. [&hellip;]","og_url":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/","og_site_name":"JW Player","article_published_time":"2013-08-05T04:00:00+00:00","article_modified_time":"2023-02-07T19:40:48+00:00","author":"JW Player","twitter_card":"summary_large_image","twitter_misc":{"Written by":"JW Player","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#article","isPartOf":{"@id":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/"},"author":{"name":"JW Player","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f"},"headline":"Age Verification with JW Player","datePublished":"2013-08-05T04:00:00+00:00","dateModified":"2023-02-07T19:40:48+00:00","mainEntityOfPage":{"@id":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/"},"wordCount":452,"commentCount":0,"publisher":{"@id":"https:\/\/jwplayer.com\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/","url":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/","name":"Age Verification with JW Player - JW Player","isPartOf":{"@id":"https:\/\/jwplayer.com\/#website"},"datePublished":"2013-08-05T04:00:00+00:00","dateModified":"2023-02-07T19:40:48+00:00","breadcrumb":{"@id":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jwplayer.com\/blog\/age-verification-with-jw-player\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jwplayer.com\/"},{"@type":"ListItem","position":2,"name":"Age Verification with JW Player"}]},{"@type":"WebSite","@id":"https:\/\/jwplayer.com\/#website","url":"https:\/\/jwplayer.com\/","name":"JW Player","description":"End-to-End Solution for Streaming &amp; Monetizing Video","publisher":{"@id":"https:\/\/jwplayer.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jwplayer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jwplayer.com\/#organization","name":"JW Player","url":"https:\/\/jwplayer.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/","url":"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png","contentUrl":"https:\/\/jwplayer.com\/wp-content\/uploads\/2023\/02\/logo-jwp-primary.png","width":1000,"height":417,"caption":"JW Player"},"image":{"@id":"https:\/\/jwplayer.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/4ce3d83ed5ba775537e8e6c8307f3c6f","name":"JW Player","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jwplayer.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2db7398616357b21568fd90b8357560b?s=96&d=mm&r=g","caption":"JW Player"},"url":"https:\/\/jwplayer.com\/blog\/author\/jw-player\/"}]}},"_links":{"self":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/comments?post=3004"}],"version-history":[{"count":1,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3004\/revisions"}],"predecessor-version":[{"id":5964,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/posts\/3004\/revisions\/5964"}],"wp:attachment":[{"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/media?parent=3004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/categories?post=3004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jwplayer.com\/wp-json\/wp\/v2\/tags?post=3004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}