Cassidyrouth Posted November 17, 2023 Share Posted November 17, 2023 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! Link to comment
charliefofo Posted November 20, 2023 Share Posted November 20, 2023 I'd like to know if this is possible to do with vimeo videos Link to comment
tuanphan Posted November 24, 2023 Share Posted November 24, 2023 Yesterday I solved a similar case, but with uploaded video, not Vimeo or Youtube, use JS code (hover text >> play or pause video) Cassidyrouth 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Kronos1 Posted March 8 Share Posted March 8 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
amphotovideo Posted June 16 Share Posted June 16 Any chance this can adopted for vimeo aswell? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment