Question

I am having a youtube video embedded and underneath I have a textArea comment about the video, all I want to do is when I click the video, the text comment disappear as a small bar underneath the video.

The text comment appears again when the video is finished or I click on the minimized bar.

The code is on Jsfiddle here

But I cannot get the event of the textarea neither the youtube video, how can I achieve this ?

Thanks

Answer 1

On my site I used youtube apis.

I used the onStateChange event to listen for the video stopping or starting, then do my stuff in a function as follows:

   <script>
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/player_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var myPlayer;
        function onYouTubePlayerAPIReady() {
           myPlayer= new YT.Player('myYouTubeVid', {
           height: '315',
           width: '420',
           videoId: 'VHkcOKMFLoU',
           events: {
                   'onReady': onPlayerReady,
                   'onStateChange': onMyPlayerStateChange
                }

            });

      //Whatever you want to happen onStateChange happens here
      function onMyPlayerStateChange(event) {
            if (event.data == 1) {
                // Do Stuff
            }
        }
    </script>