video seo score checher tool

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>YouTube Videos SEO Score Checker</title>
   <style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
  color: #333;
}

header {
  background-color: #4caf50;
  color: #fff;
  padding: 1em;
  text-align: center;
}

h1 {
  font-size: 2em;
  margin: 0;
}

main {
  max-width: 600px;
  margin: 0 auto;
  padding: 2em;
}

.form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 2em;
}

label {
  font-size: 1.2em;
  margin-bottom: 0.5em;
  color: #4caf50;
}

#video-url {
  width: 80%;
  font-size: 1.2em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  border: 2px solid #4caf50;
  border-radius: 5px;
}

#submit-btn {
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 0.3em;
  font-size: 1.2em;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#submit-btn:hover {
  background-color: #fff;
  color: #4caf50;
  border: 2px solid #4caf50;
}

.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #4caf50;
  padding: 2em;
}

.score-container {
  text-align: center;
  margin-bottom: 2em;
}

#score {
  font-size: 4em;
  font-weight: bold;
  color: #4caf50;
  margin: 0;
}

.analysis-container {
  text
</style>
  </head>
  <body>
    <header>
      <h1>YouTube Videos SEO Score Checker</h1>
    </header>
    <main>
      <div class="form-container">
        <label for="video-url">Enter YouTube Video URL:</label>
        <input type="text" id="video-url" placeholder="https://www.youtube.com/watch?v=..." />
        <button id="submit-btn">Check Score</button>
      </div>
      <div class="result-container">
        <div class="score-container">
          <h2>SEO Score:</h2>
          <p id="score">-</p>
        </div>
        <div class="analysis-container">
          <h2>SEO Analysis:</h2>
          <ul id="analysis-list">
            <li>-</li>
            <li>-</li>
            <li>-</li>
            <li>-</li>
          </ul>
        </div>
      </div>
    </main>
    <script>
function checkSEO() {
  const videoURL = document.getElementById("video-url").value;
  const analysisList = document.getElementById("analysis-list");

  // Validate YouTube Video URL
  const urlRegex =
    /^(https?\:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/;
  if (!urlRegex.test(videoURL)) {
    analysisList.innerHTML = "<li>Please enter a valid YouTube video URL.</li>";
    document.getElementById("score").textContent = "-";
    return;
  }

  // Fetch YouTube API data
  const videoID = videoURL.match(/(?<=v=)[^&?]*/)[0];
  const apiURL = `https://www.googleapis.com/youtube/v3/videos?id=${videoID}&part=snippet,statistics&key=YOUR_API_KEY`;
  fetch(apiURL)
    .then((response) => response.json())
    .then((data) => {
      if (data.items.length === 0) {
        analysisList.innerHTML = "<li>The video ID is invalid or the video is not available.</li>";
        document.getElementById("score").textContent = "-";
        return;
      }

      // Calculate SEO score
      const videoData = data.items[0];
      const videoTitle = videoData.snippet.title;
      const videoDescription = videoData.snippet.description;
      const videoTags = videoData.snippet.tags || [];
      const viewCount = videoData.statistics.viewCount;
      const likeCount = videoData.statistics.likeCount;
      const dislikeCount = videoData.statistics.dislikeCount;
      const commentCount = videoData.statistics.commentCount;
      const titleScore = calculateTitleScore(videoTitle);
      const

</script>
  </body>
</html>