Scratch-to-Reveal YouTube Video with Text: Boost Engagement on Your Website

Looking for a fun, interactive way to promote your YouTube videos or online courses?
The Scratch-to-Reveal technique adds gamification to your content and grabs the viewer’s attention in a unique way. In this post, we’ll show you how to embed a YouTube video inside a scratchable canvas with custom text like “Google Ads Course in Hindi”—and unlock the video only after users scratch off 50% of the area!

---

🔍 Why Use Scratch-to-Reveal for YouTube Videos?

Traditional embeds are boring. Adding a scratch-to-reveal effect:

• ✅ Increases engagement time
• ✅ Makes your content interactive
• ✅ Gamifies the user experience
• ✅ Encourages curiosity and action

Whether you’re a course creator, digital marketer, or YouTuber, this is a smart way to turn casual visitors into active viewers.

---

💡 What You’ll Learn

• How to create a responsive scratch layer
• How to display a custom text like “Google Ads Course in Hindi”
• How to reveal a YouTube video and “Click to Play” button after 50% is scratched

---

🛠️ Step-by-Step: Add Scratch-to-Reveal YouTube Video

Here’s the complete code you can use inside a WordPress “Custom HTML” block.

<!-- Scratchable YouTube Embed with Text "Google Ads Course in Hindi" -->
<style>
  .scratch-video-wrapper {
    position: relative;
    max-width: 100%;
    width: 100%;
    max-width: 560px;
    margin: 30px auto;
    aspect-ratio: 16 / 9;
  }

  .scratch-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  #scratch-video-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    z-index: 2;
  }

  #play-button {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 3;
  }
</style>

<div class="scratch-video-wrapper">
  <iframe id="video-frame" src="https://www.youtube.com/embed/kD25DovvqVs?autoplay=1" allowfullscreen></iframe>
  <canvas id="scratch-video-canvas"></canvas>
  <button id="play-button">Click to Play</button>
</div>

<script>
  const canvas = document.getElementById('scratch-video-canvas');
  const ctx = canvas.getContext('2d');
  const playButton = document.getElementById('play-button');
  const videoFrame = document.getElementById('video-frame');
  let isDrawing = false;
  let scratchedArea = 0;

  function resizeCanvas() {
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    drawScratchLayer();
  }

  // Draw the scratch layer with the text "Google Ads Course Part-1 in Hindi"
  function drawScratchLayer() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = '#999'; // Scratch overlay color
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Set up text style
    ctx.fillStyle = 'white';
    ctx.font = 'bold 24px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Add text to the scratch layer
    ctx.fillText('Google Ads Course Part-1 in Hindi', canvas.width / 2, canvas.height / 2);
  }

  function scratch(e) {
    if (!isDrawing) return;
    const rect = canvas.getBoundingClientRect();
    const x = (e.clientX || e.touches[0].clientX) - rect.left;
    const y = (e.clientY || e.touches[0].clientY) - rect.top;

    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(x, y, 25, 0, Math.PI * 2);
    ctx.fill();

    // Calculate scratched area
    scratchedArea = Math.round(
      (ctx.getImageData(0, 0, canvas.width, canvas.height).data.filter((value, index) => index % 4 === 3 && value < 128).length / (canvas.width * canvas.height)) * 100
    );

    // If more than 20% is scratched, reveal play button
    if (scratchedArea >= 20) {
      canvas.style.display = 'none'; // Hide the scratch layer
      playButton.style.display = 'block'; // Show the play button
    }
  }

  canvas.addEventListener('mousedown', () => isDrawing = true);
  canvas.addEventListener('mouseup', () => isDrawing = false);
  canvas.addEventListener('mousemove', scratch);

  canvas.addEventListener('touchstart', () => isDrawing = true);
  canvas.addEventListener('touchend', () => isDrawing = false);
  canvas.addEventListener('touchmove', scratch);

  playButton.addEventListener('click', () => {
    // Once play button is clicked, play the video
    videoFrame.src = videoFrame.src + "&autoplay=1"; // Ensures video starts playing
    playButton.style.display = 'none'; // Hide the play button after clicking
  });

  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
</script>

🔧 Key Updates:

1. Text Overlay: The drawScratchLayer function now includes the text “Google Ads Course in Hindi” centered on the scratch layer.
   • Text properties: white color, bold 24px font, and centered position (textAlign and textBaseline).
2. Scratch Layer: The text will be displayed over the video until the user scratches off 20% of the canvas.

📱 Mobile-Responsive:

• This will work well on mobile devices because of the responsive design settings (width: 100%).
• The text will stay centered even if the canvas resizes.