Age-Gate

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • Plugin Author JW Player

    (@longtail-video)

    9 years, 5 months ago

    The best way to do this would be to this via our blog post here, not as a plugin – http://www.jwplayer.com/blog/age-verification-with-jw-player/

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    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.

    Plugin Author JW Player

    (@longtail-video)

    9 years, 5 months ago

    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 – http://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>

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    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?

    Plugin Author JW Player

    (@longtail-video)

    9 years, 5 months ago

    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.

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    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.

    Plugin Author JW Player

    (@longtail-video)

    9 years, 5 months ago

    Do you have access to upload files to your website via ftp?

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    Yes I do, that is how I upload my videos

    Plugin Author JW Player

    (@longtail-video)

    9 years, 5 months ago

    Upload a file called iframe.html to the root of your site that has the same code as – http://demo.jwplayer.com/age-gate/iframe.html

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    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.

    Plugin Author JW Player

    (@longtail-video)

    9 years, 5 months ago

    This is a public forum. Contact our support directly.

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    Sorry, but I already did and they were no help you’ve provided by far the most in depth answers to this point.

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    But I think I have an idea of where to put the link so let me put it there and see what happens.

    Plugin Author JW Player

    (@longtail-video)

    9 years, 5 months ago

    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.

    Thread Starter bruinshockey08

    (@bruinshockey08)

    9 years, 5 months ago

    Okay thanks, I will attempt to get back to that guy, but he didn’t seem knowlegable on the WordPress side of things.

Viewing 15 replies - 1 through 15 (of 19 total)
1 2
  • The topic ‘Age-Gate’ is closed to new replies.