1

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?.

Artemix
  • 8,497
  • 14
  • 48
  • 75

2 Answers2

1

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>";
Community
  • 1
  • 1
VC.One
  • 14,790
  • 4
  • 25
  • 57
  • It worked, partially, full of issues though, like the "play" button being too small, or once the suggested videos appeared they were also too small and when I clicked in one of them the next video was huge. Dunno, I don't like this approach, I ended up using VideoTexture, but yeah, this solved the issue I guess. – Artemix Apr 07 '16 at 15:01
  • Is that the `iframe` approach you mean? I didnt test that one but suggested it. Might need tweaking via URL options etc. The **[other option](http://stackoverflow.com/a/35711654/2057709)** of using a Flash-based YTube player might be better and you don't need stageWebView for that, just a movieclip container and resize with AS3 code... – VC.One Apr 07 '16 at 17:05
  • But I don't think the flash-based one is gonna work on iOS. – Artemix Apr 07 '16 at 18:12
0

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"/>
kare
  • 147
  • 1
  • 9