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:

<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>

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:

// Inject YouTube API script
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

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.

function onYouTubePlayerAPIReady() {
    
    }

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.

var player;
    
    function onYouTubePlayerAPIReady() {
      // create the global player from the specific iframe (#video)
      player = new YT.Player('video', {
        events: {
          // call this function when player is ready to use
          'onReady': onPlayerReady
        }
      });
    }

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.

function onPlayerReady(event) {
      
      // bind events
      var playButton = document.getElementById("play-button");
      playButton.addEventListener("click", function() {
        player.playVideo();
      });
      
      var pauseButton = document.getElementById("pause-button");
      pauseButton.addEventListener("click", function() {
        player.pauseVideo();
      });
      
    }

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

<iframe src="//player.vimeo.com/video/80312270?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>

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.

<script src="froogaloop.min.js"></script>

3. Create the player object

var iframe = document.getElementById('video');
    
    // $f == Froogaloop
    var player = $f(iframe);

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.

var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
      player.api("play");
    });
    
    var pauseButton = document.getElementById("pause-button");
    pauseButton.addEventListener("click", function() {
      player.api("pause");
    });

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.

You can do much more with the APIs for both of these services. It can be pretty fun, just dive in!

• Vimeo APIs
• YouTube APIs

Play and Pause Buttons for YouTube and Vimeo Videos (via Their APIs) is a post from CSS-Tricks

It’s Tuesday which means that the Treehouse Show is back! In episode 75 of The Treehouse Show, Nick and Jason (@jseifer) talk about FlexNav for responsive menus, coding JavaScript the right way, CSS animation tricks, and much more.

This Week’s Links

• FlexNav – A jQuery Plugin for Responsive Menus

• JS: The Right Way

• Download Bootstrap 3 UI Kit

• Fit.js » Fit things into other things

• CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | CSS-Tricks

• countUp.js

• Design the Details: Empty States by @hamishmcneill — Realmac Software Blog

• Windows Chrome, why do my fonts look so bad? – Lee Green

The post Flexible Navigation, JavaScript: The Good Parts, CSS Animation Tricks | The Treehouse Show Episode 75 appeared first on Treehouse Blog.

Tuts+ Premium courses teach you a single skill from top to bottom, inside out.

Currently, more than 15,000 members are sharpening their skills in web design, web development, photography, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we’re highlighting a few of the latest and greatest course additions to Tuts+ Premium.

New Development Courses

Ember Testing

In this course we’ll learn how to test Ember applications. We’ll review how to set up an Ember app for testing, what testing helpers are available to us, how to write integration and unit testing, and much more.

Machine Learning Distilled

Welcome to “Machine Learning Distilled.” In this course, we’ll review machine learning in a very compressed way. In other words, what is machine learning, why would you want to do it, and how is it done?

Perfect Workflow in Resharper

Are you struggling trying to figure out how to improve your productivity? Do you have a good handle on the C# language, but still feel like it takes you forever to write code. Well, no more. Enter Resharper by Jetbrains. Resharper is a fantastic extension for Visual Studio that will help you to increase your productivity and decrease your development time.

Diving into Octopress

A lot of blogging frameworks are great if you have a large site that needs the features of a content management system, but what if you want something simpler? Let’s talk about Octopress.

Object-Oriented Design in PHP

Object-Oriented Design can offer a developer a structured way to break apart an application into logical, maintainable chunks. In this course, we go over various different OOD techniques, patterns, and concepts to help you improve the sustainability and testability of your code base.

Join Tuts+ Premium for Courses, eBooks, and More

Tuts+ Premium has a huge collection of courses, eBooks, source files and guides on hundreds of creative and technical topics. And we’re adding new content every week. Sign up now and develop your skills today!

Tuts+ Premium courses teach you a single skill from top to bottom, inside out.

Currently, more than 15,000 members are sharpening their skills in web design, web development, photography, Photoshop, vector design, video effects and much more. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into. Today, we’re highlighting a few of the latest and greatest course additions to Tuts+ Premium.

New Development Courses

Ember Testing

In this course we’ll learn how to test Ember applications. We’ll review how to set up an Ember app for testing, what testing helpers are available to us, how to write integration and unit testing, and much more.

Machine Learning Distilled

Welcome to “Machine Learning Distilled.” In this course, we’ll review machine learning in a very compressed way. In other words, what is machine learning, why would you want to do it, and how is it done?

Perfect Workflow in Resharper

Are you struggling trying to figure out how to improve your productivity? Do you have a good handle on the C# language, but still feel like it takes you forever to write code. Well, no more. Enter Resharper by Jetbrains. Resharper is a fantastic extension for Visual Studio that will help you to increase your productivity and decrease your development time.

Diving into Octopress

A lot of blogging frameworks are great if you have a large site that needs the features of a content management system, but what if you want something simpler? Let’s talk about Octopress.

Object-Oriented Design in PHP

Object-Oriented Design can offer a developer a structured way to break apart an application into logical, maintainable chunks. In this course, we go over various different OOD techniques, patterns, and concepts to help you improve the sustainability and testability of your code base.

Join Tuts+ Premium for Courses, eBooks, and More

Tuts+ Premium has a huge collection of courses, eBooks, source files and guides on hundreds of creative and technical topics. And we’re adding new content every week. Sign up now and develop your skills today!

W3C invites the financial technology community to attend its Workshop Web Payments: How do you want to pay?, on March 24-25 in Paris, France. W3C Member and non-Member participants will include banks, credit card companies, governments, mobile network operators, payment solution providers, technology companies, retailers, and content creators. W3C’s Workshop goal is to leverage the power of the Web to improve consumer payment choice and satisfaction, while easing the work of web developers to support all current and future payment solutions and empowering payment providers to easily reach across different solutions, devices and platforms. There is no Workshop fee, but interested parties should submit a presentation proposal or statement of interest to the Workshop Program Committee by 8 February. Read the media advisory and more information on participation.