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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

Youtube Video Timestamp Generator Online

</h1>

<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>

<label for="minutes">Minutes:</label>

<input

name=""

type="number"

id="minutes"

placeholder="Enter Minutes"

value="0"

required

class="form-control"

</div>

<label for="seconds">Seconds:</label>

<input

name=""

type="number"

id="seconds"

placeholder="Enter Seconds"

value="0"

required

class="form-control"

</div>

Copy to Clipboard

</button>

</div>

</div>

</body>

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>

Node.js Express Youtube Video URL Timestamp Link Generator in Javascript Full Project 2020

Live Demo

Get Started

Screenshot

Leave a Reply Cancel reply

Live Demo

Get Started

Screenshot

Related posts:

You Might Also Like

Javascript Project to Build Volume Calculator in Browser Using HTML5 & CSS3

Node.js Express Stripe API Payment Gateway Integration to Setup Online Payments Full Tutorial 2020

Javascript Project to Build Related Words Generator Using Datamuse API in Browser Using HTML5 Full Project For Beginners

Leave a Reply Cancel reply