Ember programatically pass data between components

I have two ember components, one to show video card (video-card) and another to show video modal (video-modal) when playing the video. What I want to achieve in Ember is to be able to pass to the video-modal the video object the model should currently play. As for now I wasn't able somehow to bind the video object from the video-card to the video-modal.

/components/video-card.js

import Ember from 'ember';

export default Ember.Component.extend({

    actions: {
        play: function(){
            // outputs video title when video thumbnail is clicked
            console.log(this.get('video').get('title')); 
            Ember.$('#video-modal').openModal();
        }
    }

});

The only thing these components have in common is the /controller/application.js controller because the components are inserted in different parts of the tempalte:

/tempaltes/application.hbs

{{video-modal}}

/templates/index.hbs

{{#each model.videos as |video|}}
<li>
  {{video-card video=video}}
</li>
{{/each}}

Ho to bind the video object from video-card when play() action is triggered, to the video-modal component dynamically?