Unable to embed this directive inside a colorbox

My page has a list of links to youtube videos. If the user clicks on a link I want to open it in a `jquery.colorbox`. The following does not work. The colorbox opens with nothing in it and the youtube video is loaded behind it and is not wrapped in the colorbox.

View
``

Controller
`$scope.$on('youtube.player.ready', function ($event, player) {
$(".youtube-video").colorbox({
open: true,
});
});`

Start by reproducing the provided youtube-video markup and the youtube.player.ready handler that initializes jquery.colorbox. Inspect how the directive creates the YouTube player and how colorbox selects the element; done means the video appears inside the opened colorbox rather than loading behind it.

Written by the indexing model from the issue text.