If you are still unable to play any YouTube videos, copy the text on this web page and paste it into a new Notepad or TextEdit file. Save the file as 'youtube.lua'. On Windows, navigate to 'C: Program Files (x86) VideoLAN VLC lua playlist' in file explorer. On Mac, right-click on VLC.app in Applications and click Show Contents. Chat.com is a free video chat website where you can watch up to 4 webcams at the same time in multiple chatrooms, invite people you like to a private chat, send instant messages, create and view profiles with photos, send and receive offline messages, fan and rate people, get email notifications when someone you like comes online, send tokens, and more.
Take the pain out of building site search with the Algolia hosted API. Start free now!
Sometimes you just need to start a video playing by some user interaction on the page other than clicking right on that video itself. Perhaps a “Play Video” button of your own creation lives on your page and you want to start that video when that button is clicked. That’s JavaScript territory. And if that video is a YouTube or Vimeo video, we’ll need to make use of the APIs they provide. No problem.
For these examples, we’ll assume you’ve already picked out a video and you’re going to put it on the page in an
For YouTube
1. Make sure the iframe src URL has ?enablejsapi=1 at the end
Like this:
I also put an id attribute on the iframe so it will be easy and fast to target with JavaScript.
2. Load the YouTube Player API
You could just link to it in a <script>, but all their documentation shows loading it async style, which is always good for third-party scripts, so let’s do that:
3. Create a global function called onYouTubePlayerAPIReady
This is the callback function that the YouTube API will call when it’s ready. It needs to be named this.
It’s likely you have some structure to your JavaScript on your page, so generally I’d recommend just having this function call another function that is inside your organizational system and get going on the right track right away. But for this tutorial, let’s just keep it soup-y.
4. Create the Player object
This is the object that has the ability to control that video. We’ll create it using the id attribute on that iframe in our HTML.
Another callback!
5. Create the “player ready” callback and bind events
We named this function when we created the player object. It will automatically be passed the event object, in which event.target is the player, but since we already have a global for it let’s just use that.
Here we bind a simple click event to an element on the page with the id #play-button (whatever custom button you want) and call the player object’s playVideo method.
All Together Now
And that’ll do it! Here’s a demo:
See the Pen Play Button for YouTube by Chris Coyier (@chriscoyier) on CodePen.
I used a little SVG templating in there for the buttons just for fun.
For Vimeo
1. Make sure the iframe src URL has ?api=1 at the end
I also put an id attribute on the iframe so it will be easy and fast to target with JavaScript.
2. Load the “froogaloop” JS library
The Vimeo player API actually works by sending commands through postMessage right to the iframe. You don’t need the froogaloop library to do that, but postMessage has some inherent complexities that this library (by Vimeo themselves) makes way easier. Plus it’s only 1.8kb so I’d recommend it.
Clicker Training For Dogs Youtube Honey
3. Create the player object
We target the iframe by the id attribute we added. Then we create the player using the special froogaloop $f.
4. Bind events
All we have to do now is call methods on that player object to play and pause the video, so let’s call them when our play and pause buttons are clicked.
All Together Now
That’ll do it for Vimeo. Here’s a demo:
See the Pen Pause / Play Buttons for Vimeo Videos by Chris Coyier (@chriscoyier) on CodePen.
Youtube Clicker Crazy Games
You can do much more with the APIs for both of these services. It can be pretty fun, just dive in!