diff --git a/rowers/templates/embedded_video.html b/rowers/templates/embedded_video.html
index 5291edcd..374bc716 100644
--- a/rowers/templates/embedded_video.html
+++ b/rowers/templates/embedded_video.html
@@ -99,6 +99,8 @@
       <input type="range" min="0" max="{{ maxtime }}" value="{{ analysis.delay }}"
       id="myRange">
     </div>
+    <div id="dataplay"></div>
+    <!-- <div id="datastop"></div> -->
   </li>
   <li class="grid_2">
     <div id="player"></div>
@@ -117,7 +119,8 @@
       // 3. This function creates an <iframe> (and YouTube player)
       //    after the API code downloads.
       var player;
-      var playing;
+      var playing = false;
+      var dataplaying = false;
       var videotime = 0;
       var data = JSON.parse('{{ data|safe }}');
       {% for id, metric in metrics.items %}
@@ -183,56 +186,65 @@
         datatime = slider.value;
 
         if (lock.checked) {
-          sliderpos = Math.round(videotime) + Math.round(delay);
-          slider.value = sliderpos;
-          // Setting Data
-          // velo = boatspeed[Math.round(datatime)];
-          lat = latitude[Math.round(datatime)];
-          lon = longitude[Math.round(datatime)];
-          // strokerate = spm[Math.round(datatime)];
-          // catchangle = ctch[Math.round(datatime)];
-          {% for id, metric in metrics.items %}
-          {{ id }}_now = {{ id }}_values[Math.round(datatime)];
-          // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
-          {% endfor %}
+          if (!dataplaying) { // set data values
+            sliderpos = Math.round(videotime) + Math.round(delay);
+            slider.value = sliderpos;
 
-          document.getElementById("time").innerHTML = Math.round(videotime);
-          document.getElementById("datatime").innerHTML = Math.round(datatime);
-          // document.getElementById("speed").innerHTML = velo;
-          // document.getElementById("spm").innerHTML = strokerate;
-          // document.getElementById("catch").innerHTML = catchangle;
-          {% for id, metric in metrics.items %}
-          document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
-          document.getElementById("{{ id }}").className = 'bold';
-          {% endfor %}
-          {% for group in metricsgroups %}
-          try {
-            set_{{ group }}();
-          } catch (e) {}
-          {% endfor %}
-          try {
-            var newLatLng = new L.LatLng(lat, lon);
-            // console.log(newLatLng);
-            marker.setLatLng(newLatLng);
-          } catch (e) {
+            // Setting Data
+            // velo = boatspeed[Math.round(datatime)];
+            lat = latitude[Math.round(datatime)];
+            lon = longitude[Math.round(datatime)];
+            // strokerate = spm[Math.round(datatime)];
+            // catchangle = ctch[Math.round(datatime)];
+            {% for id, metric in metrics.items %}
+            {{ id }}_now = {{ id }}_values[Math.round(datatime)];
+            // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
+            {% endfor %}
+
+
+            document.getElementById("time").innerHTML = Math.round(videotime);
+
+            document.getElementById("datatime").innerHTML = Math.round(datatime);
+
+            // document.getElementById("speed").innerHTML = velo;
+            // document.getElementById("spm").innerHTML = strokerate;
+            // document.getElementById("catch").innerHTML = catchangle;
+            {% for id, metric in metrics.items %}
+            document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
+            document.getElementById("{{ id }}").className = 'bold';
+            {% endfor %}
+            {% for group in metricsgroups %}
+            try {
+              set_{{ group }}();
+            } catch (e) {}
+            {% endfor %}
+            try {
+              var newLatLng = new L.LatLng(lat, lon);
+              // console.log(newLatLng);
+              marker.setLatLng(newLatLng);
+            } catch (e) {
+            }
           }
 
         } else {
-          output.value = Math.round(datatime)-Math.round(videotime);
+          if (!dataplaying) {
+            output.value = Math.round(datatime)-Math.round(videotime);
+          }
         }
 
       }
 
       function stopVideo() {
-        player.stopVideo();
+        player.pauseVideo();
+        playing = false;
       }
 
       // call this function when player state changes
       function onPlayerStateChange(event) {
         if (event.data == YT.PlayerState.PLAYING) {
-          playing = false;
+
         } else {
-          playing = true;
+
         }
       }
     </script>
@@ -304,6 +316,7 @@
   $(document).ready( function() {
   // lock
   var lock = document.getElementById("lock");
+  // lock.onchange nog doen
   var output = document.getElementById("id_delay");
   {% if locked %}
   lock.checked = true;
@@ -322,15 +335,18 @@
 
   // Update the current slider value (each time you drag the slider handle)
   slider.oninput = function() {
-    try {
-      output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
-      delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
+    if (!lock.checked) {
+      try {
+
+        delay = Math.round(slider.value)-Math.round(player.getCurrentTime());
+        output.value = Math.round(slider.value)-Math.round(player.getCurrentTime()); // Display the default slider value
+      }
+      catch(err) {
+        output.value = Math.round(slider.value);
+        delay = Math.round(slider.value);
+      }
     }
-    catch(err) {
-      output.value = Math.round(slider.value);
-      delay = Math.round(slider.value);
-    }
-    clearInterval(timeupdater)
+    clearInterval(timeupdater);
     var datatime = this.value
     var videotime = Math.round(player.getCurrentTime());
     if (lock.checked) {
@@ -338,13 +354,14 @@
         player.seekTo(this.value-output.value);
         videotime = this.value-output.value;
       } else {
-        if (playing) {
+        if (playing && !dataplaying) {
           player.seekTo(0);
           player.playVideo();
         }
-        else {
+        else if (!playing && !dataplaying) {
           player.seekTo(0);
           player.pauseVideo();
+          playing = false;
         }
       }
     } else {
@@ -412,10 +429,10 @@
         else {
           player.seekTo(0);
           player.pauseVideo();
+          playing = false;
         }
       }
     } else {
-      console.log('changing, not checked');
       output.value = this.value-Math.round(player.getCurrentTime());
     }
     var datatime = this.value
@@ -468,7 +485,101 @@
     } else {
       output.disabled = false;
     }
+}
+// Slider start stop
+// moet de buttons pas hieronder definieren en dan in de html
+// pluggen
+var timer;
+
+
+function clock() {
+  timer = setInterval(myClock, 1000);
+  var c = parseInt(slider.value,10);
+  console.log('starting clock');
+
+  function myClock() {
+    document.getElementById("datatime").innerHTML = c;
+    c = c+1;
+    slider.value = c;
+
+    // update data fields
+    lat = latitude[Math.round(c)];
+    lon = longitude[Math.round(c)];
+    {% for id, metric in metrics.items %}
+    {{ id }}_now = {{ id }}_values[Math.round(c)];
+    // console.log(datatime,{{ id }}_now, "{{ metric.name }}")
+    {% endfor %}
+
+    {% for id, metric in metrics.items %}
+    document.getElementById("{{ id }}").innerHTML = {{ id }}_now;
+    document.getElementById("{{ id }}").className = 'bold';
+    {% endfor %}
+    {% for group in metricsgroups %}
+    try {
+      set_{{ group }}();
+    } catch (e) {}
+    {% endfor %}
+    try {
+      var newLatLng = new L.LatLng(lat, lon);
+      // console.log(newLatLng);
+      marker.setLatLng(newLatLng);
+    } catch (e) {
+    }
+
+    if (lock.checked) {
+      player.seekTo(c+parseInt(output.value));
+    }
+    if (c == latitude.length) {
+      clearInterval(timer);
+      c = 0;
+    }
   }
+}
+
+// onderstaande alleen als lock.checked
+var dataplay = document.createElement("input");
+dataplay.type = "button";
+dataplay.value = "Play";
+document.getElementById("dataplay").appendChild(dataplay);
+
+// var datastop = document.createElement("input");
+// datastop.type = "button";
+// datastop.value = "Stop";
+// document.getElementById("datastop").appendChild(datastop)
+
+dataplay.onclick = function() {
+  if (lock.checked) {
+    dataplaying = false;
+    if (playing == false) {
+      player.playVideo();
+      dataplay.value = "Pause";
+      playing = true;
+    } else {
+      player.pauseVideo();
+      dataplay.value = "Play";
+      playing = false;
+    }
+  } else {
+    if (!dataplaying) {
+      clock();
+      dataplay.value = "Pause";
+      dataplaying = true;
+      if (lock.checked) {
+        playing = true;
+      }
+    } else {
+      clearInterval(timer);
+      dataplay.value = "Play";
+      dataplaying = false;
+    }
+  }
+}
+
+// datastop.onclick = function() {
+//   console.log('stopping');
+//   clearInterval(timer);
+// }
+
 });
 </script>
 <script type="text/javascript" src="https://bernii.github.io/gauge.js/dist/gauge.js"></script>
diff --git a/templates/newbase.html b/templates/newbase.html
index 27875ee8..97ec84b8 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -64,7 +64,7 @@
       if (d.getElementById(id)) return t;
       js = d.createElement(s);
       js.id = id;
-      js.async=true; 
+      js.async=true;
       js.src = "https://platform.twitter.com/widgets.js";
       fjs.parentNode.insertBefore(js, fjs);
 
@@ -72,7 +72,7 @@
       t.ready = function(f) {
       t._e.push(f);
       };
-      
+
       return t;
       }(document, "script", "twitter-wjs"));</script>
 
@@ -94,9 +94,9 @@
       window.addEventListener('DOMContentLoaded', function() {
 	  $(document).ready(function(){
 	      var accordionsMenu = $('.cd-accordion-menu');
-    
+
 	      if( accordionsMenu.length > 0 ) {
-		  
+
 		  accordionsMenu.each(function(){
 		      var accordion = $(this);
 		      //detect change in the input[type="checkbox"] value
@@ -121,7 +121,7 @@
     </script>
     {% analytical_head_bottom %}
   </head>
-  
+
   <body data-root="https://webapiv2.navionics.com/dist/webapi/images">
     <div class="wrapper">
 
@@ -184,10 +184,10 @@
       <side-nav class="side-nav">
         &nbsp;
       </side-nav>
-      
+
       <nav class="main-nav">
         <ul>
-          <li id="nav-workouts"> 
+          <li id="nav-workouts">
             <a href="/rowers/list-workouts/">
               <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
             </a>
@@ -233,8 +233,8 @@
              <li class="grid_4">
                <p class="successmessage">
                  You have {{ user.rower.planexpires|date_dif|ddays }} days left of your one year subscription. Please renew on or before {{ user.rower.planexpires }} or your plan will be reset to Basic. Click <a href="/rowers/paidplans/">here</a> to renew your membership.</p>
-             </li>                                               
-             {% endif %}                                              
+             </li>
+             {% endif %}
             {% endif %}
           {% endif %}
           {% if user.rower.protrialexpires and user.rower.protrialexpires|is_future_date %}
@@ -292,17 +292,17 @@
         </ul>
 
         {% block main %}
-	{% endblock %}          
+	{% endblock %}
       </main>
 
       <aside class="side">
         {% block sidebar %}
         {% endblock %}
       </aside>
-      
+
       <ad class="ad">
         {% if request|announcements %}
-        <h1>News</h1>
+        <h2>News</h2>
         {% for a in request|announcements %}
         <div class="site-announcement-box">
           <div class="site-announcement-white">
@@ -346,7 +346,7 @@
         <p>
         <ul>
           <li>
-            <h1>Help</h1>
+            <h2>Help</h2>
             <ul>
               <li>
                 <a href="/rowers/help/">Help</a>
@@ -366,7 +366,7 @@
             </ul>
           </li>
           <li>
-            <h1>About</h1>
+            <h2>About</h2>
             <ul>
               <li>
                 <a href="/rowers/email/">Contact</a>
@@ -386,7 +386,7 @@
             </ul>
           </li>
           <li>
-            <h1>Paid Plans</h1>
+            <h2>Paid Plans</h2>
             <ul>
               <li>
                 <a href="/rowers/paidplans/">Paid Plans</a>
@@ -394,7 +394,7 @@
             </ul>
           </li>
           <li>
-            <h1>Legal</h1>
+            <h2>Legal</h2>
             <ul>
               <li>
                 <a href="/rowers/legal/">Terms and Conditions</a>