Live Demo

You can see the live demo of online tool here

Get Started

In order to get started you need to create the simple index.html file and copy paste the following code

<div class="container">
          <h1 class="text-center">
              Youtube Video Timestamp Generator Online
          </h1>
          <div class="form-group">
        <label for="youtubeurl">Youtube Video URL:</label>
        <input
          name=""
          type="text"
          id="url"
          placeholder="https://www.youtube.com/watch?v=4hFFY5Uzazs"
          required
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="minutes">Minutes:</label>
        <input
          name=""
          type="number"
          id="minutes"
          placeholder="Enter Minutes"
          value="0"
          required
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="seconds">Seconds:</label>
        <input
          name=""
          type="number"
          id="seconds"
          placeholder="Enter Seconds"
          value="0"
          required
          class="form-control"
        >
      </div>
      <br><br>

      <div id="result"></div>
      <br><br>

      
      <div class="form-group">
        <button id="copy" style="display:none" class="btn btn-danger btn-block">
          Copy to Clipboard
        </button>
      </div>
        <br><br>
      </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    var url = ""
    var minutes = ""
    var seconds = ""
    var resultUrl = ""

    $("#url").on('change',function(){
      url = $(this).val()

      generateTimestamp(url,minutes,seconds)
    })

    $("#minutes").on('change',function(){
      minutes = parseInt($(this).val())
      generateTimestamp(url,minutes,seconds)
    })

    $("#seconds").on('change',function(){
      seconds = parseInt($(this).val())
      generateTimestamp(url,minutes,seconds)
    })

    $("#copy").on('click',function(){
      copytoclipboard()
    })

    function generateTimestamp(url,minutes,seconds){
       var minutesseconds = minutes * 60
       console.log(minutesseconds)
       console.log(seconds)
       var total = parseInt(minutesseconds + seconds)
       console.log(total)
       resultUrl = `<h1 class="text-center"><a target="_blank" style="text-decoration:underline" href="https://youtu.be/${youtube_parser(url)}?t=${total}">https://youtu.be/${youtube_parser(url)}?t=${total}</a></h1>`
       $("#result").html(resultUrl)
       $("#copy").show()
    }

    function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
    
}

function copytoclipboard(){
  var textToCopy = $("#result").text();

var myTemporaryInputElement = document.createElement("input");
myTemporaryInputElement.type = "text";
myTemporaryInputElement.value = textToCopy;

document.body.appendChild(myTemporaryInputElement);

myTemporaryInputElement.select();
document.execCommand("Copy");

document.body.removeChild(myTemporaryInputElement);

Swal.fire(
  'Good job!',
  'URL Successfully Copied',
  'success'
)
}

</script>
</html>

Screenshot