Pause/stop a youtube video

Question

It seems this question has been asked before with no definitive solution, so I thought I'd try my luck.
Here's how the video is embedded on compositionReady:
var youtubevid = $("<iframe/>");
sym.getSymbol("intro2").$("videoContainer").append(youtubevid);
youtubevid.attr('type','text/html');
youtubevid.attr('width','387');
youtubevid.attr('height','218');
youtubevid.attr('src','http://www.youtube.com/embed/qHxn1_2KfCU?enablejsapi=1');  // url/Video_Id
youtubevid.attr('frameborder','0');       // 1 | 0
youtubevid.attr('allowfullscreen','0');   // 1 | 0
I understand that in order to play/pause/stop a youtube video, you have to go through the API:
https://developers.google.com/youtube/iframe_api_reference#Functions
It looks like the function I would want to use here is:
player.pauseVideo();
So here are the two methods I've tried with no success:
youtubevid.pauseVideo();
sym.getSymbol("intro2").$("videoContainer").youtubevid.pauseVideo();
Any suggestions? Thank you.

Answer 1

I figured out how to reset the Youtube video upon hiding thanks to FigFrance's contribution to the thread found here:
https://forums.adobe.com/message/4979969#4979969
The secret was adding .empty() to my video container.  Here is my functioning button code:
Show Video:
//code to embed youtube into symbol
var youtube = $("<iframe/>");
sym.$("video").empty().append(youtube);
youtube.attr('type', 'text/html');
youtube.attr('width', '640');
youtube.attr('height', '360');
youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');
youtube.attr('frameborder', '1');
youtube.attr('allowfullscreen', '0');
// Show an element
sym.$("video").show();
Hide Video:
sym.$("video").empty();
// Hide an element
sym.$("video").hide();
Brandon