Last active
June 17, 2018 20:59
-
-
Save jessedc/5344465 to your computer and use it in GitHub Desktop.
Autoplay Vimeo Videos from outside their iframe using Javascript.
This file contains hidden or 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
| <html> | |
| <head></head> | |
| <body> | |
| <!-- NOTE: ?api=1 and player_id at the end of the URL --> | |
| <iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> | |
| <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> | |
| <script> | |
| var player = $f(document.getElementById('player')); | |
| player.addEvent('ready', function() { | |
| player.api('play'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| <html> | |
| <head></head> | |
| <body> | |
| <iframe width="" height="" src="http://player.vimeo.com/video/62207569 " frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> | |
| <script> | |
| //NOTE: Jesse Collis github.com/jessedc - this works as of it's last updated date. YMMV | |
| // Add a listener for the window's load event | |
| window.addEventListener('load', onWindowLoad, false); | |
| function onWindowLoad(event) { | |
| //use a loop to continue checking the vimeo iframe for the 'play' button | |
| checkForTrue(isIframeButtonLoaded, iFrameButtonLoaded); | |
| } | |
| function checkForTrue(func, callback) { | |
| setTimeout(function() { | |
| if (func()) { | |
| callback( iFrameButton() ); | |
| } else { | |
| checkForTrue(func, callback); | |
| }; | |
| }, 1000); | |
| } | |
| //finds the 'play' button within the Vimeo iframe | |
| function iFrameButton() { | |
| //window.frames[0].document.getElementsByTagName('div')[1]; // this also works | |
| return window.frames[0].document.getElementsByTagName('button')[5]; | |
| } | |
| //simple boolean condition to check for the iframe button | |
| function isIframeButtonLoaded() { | |
| return ( iFrameButton() != null ); | |
| } | |
| //once the button is loaded, click it | |
| function iFrameButtonLoaded(iFrameButton) { | |
| iFrameButton.click(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Hi jesse,
This code works perfect in all browsers but not in ipad or iphone. Any solutions?
@maheshsriram Autoplay without user interaction is generally not possible on mobile devices.
it only works on firefox not chrome
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hey Jesse,
I'm trying to do something similar with the iframe player, but I consistently get cross origin issues:
Blocked a frame with origin "http://myurl.here" from accessing a cross-origin frame.How did you get this working?