How can I pass an attribute from one component to another in EmberJS?

I have a component that has anchor tag click that opens a modal and within the model is a youtube . When the modal opens I want the id in the Youtube url to change in order to play the correct video, but I'm having trouble figuring out how to get this done. I added data-attributes with the id I need and was looking to pass this into the component to have it added to the url. I was thinking I could update an id in the component JS file.

src="https://www.youtube.com/embed/?rel=0&showinfo=0"

Below is the Handlebars templating and JS.

JS:

import Component from '@ember/component';
export default Component.extend({
  click(evt){
  let ytId = evt.target.getAttribute('data-id');
  this.set('id', ytId);
  },
  id: null,
  actions: {
    openModal() {
      this.get('onOpen')();
    }
  }
});