Last active
January 6, 2021 08:39
-
-
Save cezarpopa/3cca979804e63a35f79964cb2ecd5001 to your computer and use it in GitHub Desktop.
autoplay multiple youtube / vimeo videos on hover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" | |
| content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="videowraper"> | |
| <iframe class="card-media-yt" id="player-776" width="540px" height="100%" | |
| src="http://www.youtube.com/embed/wav6nalMRog?controls=0&showinfo=0&modestbranding=1&wmode=opaque&rel=0" | |
| frameborder="0"></iframe> | |
| </div> | |
| <div class="videoWrapper"> | |
| <iframe class="card-media-vimeo" id="player-603" src="http://player.vimeo.com/video/83267524?loop=1" width="540px" | |
| height="100%" frameborder="0"></iframe> | |
| </div> | |
| <script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> | |
| <script> | |
| /** | |
| * Vimeo autoplay | |
| */ | |
| jQuery('.card-media-vimeo').mouseover(function () { | |
| var vplayer = jQuery("#" + this.id); | |
| froogaloop = $f(vplayer[0].id); | |
| froogaloop.api('play'); | |
| vplayer.mouseout(function () { | |
| froogaloop.api('pause'); | |
| }); | |
| }); | |
| /** | |
| * Youtube autoplay | |
| */ | |
| jQuery('.card-media-yt').mouseover(function () { | |
| var ytplayer = jQuery("#" + this.id); | |
| var playersrc = jQuery(ytplayer).attr('src'); | |
| jQuery(ytplayer).mouseover(function () { | |
| jQuery(ytplayer).attr('src', playersrc + '&autoplay=1'); | |
| }); | |
| jQuery(ytplayer).mouseout(function () { | |
| jQuery(ytplayer).attr('src', playersrc); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If I navigate throw the pages and open the page with the video list then all of them successfully playing onMouseOver.
But if on this page I press "Cmd+R" (refresh it) then the videos stop playing onMouseOver.
Also, I found that if I refresh this page (with "Cmd+R"), then click on any place in the background of the page, then all video successfully playing onMouseOver.
Have any ideas?
ps: I test only with vimeo video.