Jump to content

Client wants Youtube videos to autoplay when hovered over, and pause when not

Recommended Posts

I haven't written any code since myspace & am having a difficult time with this request, hoping someone here has a solution!

My client is a video editor and wants to have custom thumbnails for all his videos that autoplay only when you're hovering over them. Because they're youtube links, I'm running into some issues. I tried the following code, but this doesn't work because youtube won't allow autoplay, so it just hides the custom thumbnail and shows the youtube thumbnail. Also, when you stop hovering with this code, it stops the video entirely, not pausing as I intended. So the viewer would need to keep their mouse over the video player the entire time, which is frustrating.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    /* Style for the video container */
    .video-container {
      position: relative;
      width: 560px; /* You can adjust the width and height as needed */
      height: 315px;
      overflow: hidden;

    /* Style for the custom thumbnail */
    .custom-thumbnail {
      width: 100%;
      height: auto;
      cursor: pointer;

    /* Style for the YouTube iframe */
    .youtube-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none; /* Initially hide the iframe */

<div class="video-container" onmouseover="playVideo()" onmouseout="pauseVideo()">
  <!-- Replace 'VIDEO_ID' with your actual YouTube video ID -->
  <img class="custom-thumbnail" src="https://images.squarespace-cdn.com/content/654a7cb7ae41bd3d2ccd6c2e/537e7b52-f818-4728-9d0a-7f736a1b4b5b/Screen+Shot+2023-11-17+at+10.57.36+AM.png?content-type=image%2Fpng" alt="Custom Thumbnail">
  <iframe class="youtube-iframe" src="https://www.youtube.com/embed/2PwfLNzyxjk?si=DEipEZ-za5naXihq?autoplay=1" frameborder="0" allowfullscreen></iframe>

  var youtubeIframe = document.querySelector('.youtube-iframe');

  function playVideo() {
    // Show and start playing the video when hovering
    youtubeIframe.style.display = 'block';

  function pauseVideo() {
    // Pause the video when not hovering
    youtubeIframe.style.display = 'none';
    youtubeIframe.src = youtubeIframe.src.replace("?autoplay=1", "");


Client sent this site as inspiration: https://arcadeedit.com/editors/paul-martinez/general-4/
I'm not adept at sifting through code and grabbing the code I need, so I tried to copy this but it didn't work the same (it's also hosted on wordpress, not squarespace, so I'm not sure if that makes a difference.

Does anyone have experience in this or know a simple solution? I think worst case scenario I'll have to upload each of the videos and add custom thumbnails and autoplay but I don't want them to autoplay constantly, just when hovered over!

Thank you so much for reading & I hope you can help!

Link to comment
  • 3 months later...

The code is missing an "&" for it to autoplay.  Also, it has to be muted in order to autoplay.  Search "autoplay" and find where I corrected this piece of code:


<iframe class="youtube-iframe" src="https://www.youtube.com/embed/2PwfLNzyxjk?si=DEipEZ-za5naXihq?&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>

Link to comment
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.