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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 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 */
}
</style>
</head>
<body>
<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>
</div>
<script>
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", "");
}
</script>
</body>
</html>
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!
Cassidyrouth reacted to a post in a topic:
Client wants Youtube videos to autoplay when hovered over, and pause when not
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"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 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 */ } </style> </head> <body> <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> </div> <script> 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", ""); } </script> </body> </html> 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!
