Youtube video crops when loading it using StageWebView

209 Views Asked by At

When loading Youtube videos through the StageWebView Air component I need the video to be scaled down to the viewport size, displaying black bars is ok, however what I end up seeing is a cropped version of the original size of the video instead.

I'm not seeing any extra parameters that I could use, the API seems to be very limited.

Any ideas how to play the video so even if the source is larger I can resize it to the viewport size?.

2

There are 2 best solutions below

3
VC.One On BEST ANSWER

Normally I display Youtube as shown in this other Answer (but that loads a Flash Player version, which you may not want). PS: Remember it's use .com/v/VID_ID for Flash Player or use .com/embed/VID_ID for HTML5 Player.

Any ideas how to play the video so even if the source is larger I can resize it to the viewport size?.

You say you have similar code as the Android example posted as Answer? Why not try to open an iframe instead since that would allow a resize option?

An example of a custom size Youtube iframe...

<iframe width="800" height="600" src="https://www.youtube.com/embed/"+ VID +"?autoplay=1" frameborder="0" allowfullscreen></iframe>

To open within iframe you'd have to make a dynamic webpage by code. Code below is untested but is based on this idea from Adobe forums. Just a starting point you could adjust / fix...

var html_Dynamic : String;

html_Dynamic = "<!DOCTYPE HTML>" +
                "<html>" +
                    "<body>" +
                        "<iframe class=\"youtube-player\" style=\"border: 0; width: 100%; height: 100%; padding:0px; margin:0px\" id=\"ytplayer\" type=\"text/html\" src=\"https://www.youtube.com/embed/" +
                            VID + "?fs=0\" frameborder=\"0\">\n" +  "</iframe>\n";
                "</body>" +
                "</html>";
1
kare On

I use this code for Android give it a try :(it resize the page size )

import flash.display.MovieClip;
import flash.media.StageWebView;
import flash.geom.Rectangle;
import flash.events.Event;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.system.Capabilities;

this.visible = false ;

var webView: StageWebView = new StageWebView();



webView.stage = stage;



function videoing(VID): void {/// VID is the video id
     stage.setAspectRatio(StageAspectRatio.LANDSCAPE);

    var vidLink:String = "https://www.youtube.com/embed/"+ VID +"?autoplay=1" ;
    trace(vidLink);
    webView = new StageWebView();
    webView.stage = this.stage;
    webView.viewPort = new Rectangle(-(stage.stageHeight/2)+100,0, stage.stageHeight*2+40 , stage.stageWidth*2 - 160);
    webView.loadURL(vidLink);
    this.stage.focus = stage;
}


//////////////// dispose the video ///////////////////////

exit_btn.addEventListener(KeyboardEvent.KEY_DOWN, fl_OptionsMenuHandler);

function fl_OptionsMenuHandler(event: KeyboardEvent = null ): void {
    if ((event.keyCode == Keyboard.BACK) && (webView)) {
        event.preventDefault();
        webView.stage = null;
        webView.dispose();
        webView = null ;
        stage.setAspectRatio(StageAspectRatio.PORTRAIT);
    }   
}

On Android it needs to add

 <application android:hardwareAccelerated="true"/>