Age-Gate
-
Hi I have had issues trying to add the age-gate to my JW Player, is there a better way to do this? I have tried the agegate.js file but I have no idea how to do this properly and there seems to be no way to look it up. Any help would be great.
Kevin
https://www.ads-software.com/plugins/jw-player-plugin-for-wordpress/
-
The best way to do this would be to this via our blog post here, not as a plugin – https://www.jwplayer.com/blog/age-verification-with-jw-player/
Where do I put the code though? I have the Vantage theme and I am not sure where to put the codes. I really am just learning on the fly here so please have some patience.
Under your shortcode for a post, put this:
<script>
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);
});
</script>Then, you need to create a page, iframe.html, with the following code (demo here – https://demo.jwplayer.com/age-gate/iframe.html):
<!DOCTYPE html>
<html>
<head>
<title>Age Verifcation</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<style type=”text/css”>html,body{font-family:Arial, Helvetica, sans-serif; font-size:14px; overflow-x:hidden; overflow-y:hidden;}</style>
<script language=”javascript”>
function checkAge()
{
var minage = 18;
var year = document.getElementById(‘year’);
year = year.options[year.selectedIndex].text;
parseInt(year);
var month = document.getElementById(‘month’);
if (document.getElementById(‘month’).options[month.selectedIndex].text == “January”){
month = “1”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “February”){
month = “2”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “March”){
month = “3”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “April”){
month = “4”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “May”){
month = “5”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “June”){
month = “6”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “July”){
month = “7”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “August”){
month = “8”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “September”){
month = “9”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “October”){
month = “10”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “November”){
month = “11”;
parseInt(month);
} else
if (document.getElementById(‘month’).options[month.selectedIndex].text == “December”){
month = “12”;
parseInt(month);
}
var day = document.getElementById(‘day’);
day = day.options[day.selectedIndex].text;
parseInt(day);
var theirDate = new Date((parseInt(year) + minage), parseInt(month), parseInt(day));
var today = new Date;
if ((today.getTime() – theirDate.getTime()) < 0){
document.getElementById(“age_form”).style.display = “none”;
document.getElementById(“message”).style.display = “none”;
document.getElementById(“submessage”).innerHTML = “You do not meet the age criteria for this video.”;
document.getElementById(“submessage”).style.color = “#FF0000”;
document.getElementById(“submessage”).style.position = “relative”;
document.getElementById(“submessage”).style.top = “50px”;
var dt3 = new Date();
dt3.setTime(dt3.getTime() + (60 * 60 * 1000));
document.cookie = ‘agegatenotoldenough=okay;expires=’ + dt3.toGMTString() + ‘;path=/’;
return false;
}
else {
parent.document.getElementById(‘ifrm’).style.display = “none”;
var dt = new Date();
dt.setTime(dt.getTime() + (60 * 60 * 1000));
document.cookie = ‘agegatejs=okay;expires=’ + dt.toGMTString() + ‘;path=/’;
return true;
}
}
</script>
</head>
<body>
<div align=”center” style=”width:100%;height:100%;position:absolute;”><span id=”message” style=”color: #FFFFFF; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none; user-select: none;”>The content in this video requires age verification.</span>
<span id=”submessage” style=”color: #FFCC00; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none; user-select: none;”>Please enter your date of birth below:</span><form onSubmit=”return false;” name=”age_form” id=”age_form”>
<select name=”month” id=”month” style=”background-color:#EEE; border:none;width:92px;”>
<option value=”1″>January</option>
<option value=”2″>February</option>
<option value=”3″>March</option>
<option value=”4″>April</option>
<option value=”5″>May</option>
<option value=”6″>June</option>
<option value=”7″>July</option>
<option value=”8″>August</option>
<option value=”9″>September</option>
<option value=”10″>October</option>
<option value=”11″>November</option>
<option value=”12″>December</option>
</select>
<select id=”day” name=”day” style=”background-color:#EEE; border:none;width:39px;”>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name=”year” id=”year” style=”background-color:#EEE; border:none;width:53px;”>
<option>2013</option>
<option>2012</option>
<option>2011</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
<option>1979</option>
<option>1978</option>
<option>1977</option>
<option>1976</option>
<option>1975</option>
<option>1974</option>
<option>1973</option>
<option>1972</option>
<option>1971</option>
<option>1970</option>
<option>1969</option>
<option>1968</option>
<option>1967</option>
<option>1966</option>
<option>1965</option>
<option>1964</option>
<option>1963</option>
<option>1962</option>
<option>1961</option>
<option>1960</option>
<option>1959</option>
<option>1958</option>
<option>1957</option>
<option>1956</option>
<option>1955</option>
<option>1954</option>
<option>1953</option>
<option>1952</option>
<option>1951</option>
<option>1950</option>
<option>1949</option>
<option>1948</option>
<option>1947</option>
<option>1946</option>
<option>1945</option>
<option>1944</option>
<option>1943</option>
<option>1942</option>
<option>1941</option>
<option>1940</option>
<option>1939</option>
<option>1938</option>
<option>1937</option>
<option>1936</option>
<option>1935</option>
<option>1934</option>
<option>1933</option>
<option>1932</option>
<option>1931</option>
<option>1930</option>
<option>1929</option>
<option>1928</option>
<option>1927</option>
<option>1926</option>
<option>1925</option>
<option>1924</option>
<option>1923</option>
<option>1922</option>
<option>1921</option>
<option>1920</option>
<option>1919</option>
<option>1918</option>
<option>1917</option>
<option>1916</option>
<option>1915</option>
<option>1914</option>
<option>1913</option>
</select>
<input type=”submit” name=”_send_date_” id=”_send_date_” value=”Verify” onClick=”return checkAge()” style=”background-color:#FFCC00 !important; border:none !important;”>
</form>
</div>
<div id=”bg” style=”position:absolute;width:103%;height:100%;background-color:#000;top:0px;z-index:-1; left:-3px;” align=”center”></div>
<script type=”text/javascript”>
var test = document.cookie.toString();
var result = test.search(“agegatejs”);
var result2 = test.search(“agegatenotoldenough”);
if (result2 != “-1”){
document.getElementById(“age_form”).style.display = “none”;
document.getElementById(“message”).style.display = “none”;
document.getElementById(“submessage”).innerHTML = “You do not meet the age criteria for this video.”;
document.getElementById(“submessage”).style.color = “#FF0000”;
document.getElementById(“submessage”).style.position = “relative”;
document.getElementById(“submessage”).style.top = “50px”;
}
if (result != “-1”){
parent.document.getElementById(‘ifrm’).style.display = “none”;
}
</script>
</body>
</html>Where does the shortcode go? I tried putting it into the post but it did not work, it gave me a huge post without the desired result. It is inserted into the post or is it inserted into one of the codes in my theme?
When you make a post using our plugin, it generates shortcode for you:
[jwplayer file=”blah.mp4″]
Then, under that, you add the <script> block I gave you.
And you create an iframe.html page (not in WP) with the code I provided at the end.
How do I create a iframe page outside of wordpress and how would it be useful within wordpress after?
Again I apologize I just am new to this and I need to know the very basics even if you assume I have a decent grasp on coding.
Do you have access to upload files to your website via ftp?
Yes I do, that is how I upload my videos
Upload a file called iframe.html to the root of your site that has the same code as – https://demo.jwplayer.com/age-gate/iframe.html
Thanks, but I don’t have any idea where that is. Are you able or willing to do a team view session and showing me how? That would be a lot easier and faster, I learn a lot better with visual aid.
This is a public forum. Contact our support directly.
Sorry, but I already did and they were no help you’ve provided by far the most in depth answers to this point.
But I think I have an idea of where to put the link so let me put it there and see what happens.
Ok, well, we can’t set up a team share from a public forum.
OK.
It would be better to continue this over support though, we have a few members of that team, so you should probably continue the conversation there.
Okay thanks, I will attempt to get back to that guy, but he didn’t seem knowlegable on the WordPress side of things.
- The topic ‘Age-Gate’ is closed to new replies.
