How to display custom player controls on youtube chromeless player using Flash builder 4.6?

Question 1

You should be able to add a click listener to the entire view. While I have never used this API before, I would imagine it would look something like this:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" title="YoutubeVideoPlay"
viewActivate="init()" click="showPlayerControl()">

<fx:Script source="YoutubePlayer.as"/>
<fx:Script>
    <![CDATA[
        public function showPlayerControl():void{
            PopUpManager.addPopUp(PlayerControls,player);
        }
    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

Question 2

So you're nearly there. What you need to remember is that the YouTube player has its own interactions, eg when the user clicks the video it usually pauses/resumes. Now you can get around this by placing an invisible Sprite on top of the video as this'll allow you to capture the user's mouse movements and clicks.

The only issue with this is the current state of autoplaying; at the moment (and for the future I guess) autoplays don't count as views against the video. The user needs to press the play button on the YouTube video to actually make that count as a view.

So what I do is only add this invisible Sprite once playback has commenced. You can then also be clever and send pause/resume events to the player itself when the user clicks on your invisible Sprite.

Regarding the UI components that you're after: they're very easy to put together, you can always grab standard UI Flash/Flex components and hook them up to the player API (I see you've made a start); it's always a good idea, though, to get a design in you head rather than sketching out UIs over and over again in code.

As a footnote: you're always welcome to use my middleware class for the YouTube player on github: https://github.com/ahmednuaman/AS3/blob/master/com/firestartermedia/lib/as3/display/component/video/YouTubePlayerAS3.as

Question 3

Solution to my question

I have a PlaylistsView.mxml which has a List with all the videos. Once clicked it pushes a new view called YtPlayView.mxml

<!--YtPlayView.mxml-->  
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:popup="views.popup.*"
    title="{data.title}" viewActivate="init()" viewDeactivate="deactivateYoutubePlayer()">
    <fx:Script source="ytfeeds/YoutubePlayer.as"/>
    <fx:Script>
        <![CDATA[
            public function deactivateYoutubePlayer():void{
                PopUpManager.removePopUp(ytcPopup);
                dispose();
            }
        ]]>
    </fx:Script>
</s:View>

In YoutubePlayer.as, onPlayerReady(event:Event) I add a mouseclick eventlistener player.addEventListener(MouseEvent.CLICK,showPlayerControl);

    <!--YoutubePlayer.as contents-->
public function showPlayerControl(event:MouseEvent):void{
    ytcPopup=new PlayerControls();
    ytcPopup.player=player;
    ytcPopup.duration=data.duration;                
    ytcPopup.currentPosition="00:00:00";        
    ytcPopup.open(this,true);
    ytcPopup.width = this.stage.width;
    ytcPopup.setStyle("modalTransparency",0);
    ytcPopup.setStyle("modalTransparencyBlur",3);
    ytcPopup.setStyle("modalTransparencyColor", "#ff0000");
    if(ytcPopup.player.getPlayerState()==1){        
        ytcPopup.playPauseBtn.setStyle("icon",ytcPopup.iconPause);
    }
    else if(ytcPopup.player.getPlayerState()==2){       
        ytcPopup.playPauseBtn.setStyle("icon",ytcPopup.iconPlay);
    }
    ytcPopup.y = this.stage.height-195;
    PopUpManager.bringToFront(ytcPopup);        
    if(player.getCurrentTime()!=0)
        ytcPopup.ytVideoSlider.value=player.getCurrentTime();       
}

Which gives me something like below (It's a portrait view, on Landscape view it comes on top of the video)

If anyone wants more source code or help, i'll be happy to help :) Just drop a comment.

enter image description here