Embed Codenameone Youtube Video

Question

I've been trying to embed a youtube video within a codename one application. When I run the simulator for both Android and iOS it looks fine, but when I actually run the application on my Galaxy S7, nothing shows. I've tried using both BrowserComponent and WebBrowser and neither work. My code is below:

    Form hi = new Form("Hi World", BoxLayout.y());                    
    Display display = Display.getInstance();

    BrowserComponent browser = new BrowserComponent();
    //WebBrowser browser = new WebBrowser();
    String videoUrl = "https://www.youtube.com/embed/r6VO3zaBJGY";

    int videoWidth = (int) ((double) display.getDisplayWidth());
    int videoHeight = (int) ((double) videoWidth*0.5625);     

    String integrationCode= "<iframe src=\"" +videoUrl+"\" frameborder=\"0\"  width=\"" + videoWidth + "\" height=\"" + videoHeight + "\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>";
    browser.setPage(integrationCode, null);
    browser.getAllStyles().setPadding(0, 0, 0, 0);
    browser.getAllStyles().setMargin(0, 0, 0, 0);

    Container browserContainer = new Container(new BorderLayout(CENTER_BEHAVIOR_CENTER));
    browserContainer.add(CENTER, browser);          
    hi.add(browserContainer);

    hi.show();

Hello I get "Refused to display the link' in a frame because it set 'X-Frame-Options' to 'sameorigin'.", source: cn1app/streams/1 (0) , please how to fix this — Compte Gmail

Shai Almog Shai Almog · Accepted Answer · 2018-12-04T05:50:30

There are two mistakes in the code: BoxLayout and CENTER_BEHAVIOR_CENTER.

The reason this won't work has to do with the way layouts work. Layout managers use the preferred size to give components the right size. BrowserComponent doesn't have a proper preferred size as the rendering of HTML is asynchronous and it's pretty flexible to begin with. In this case you used two layout managers that respect preferred size. They get a size that amounts to zero and place the browser component appropriately...

BoxLayout.Y_AXIS needs the preferred height and CENTER_BEHAVIOR_CENTER needs the preferred size to position the component in the center.

The typical workaround is to use a regular BorderLayout which defaults to the scaled behavior. This stretches the center component to take up available space. Notice you need to set it on the Form itself as it has a hardcoded size of the entire screen. The center location ignores the preferred size and gives the component the full size.

It also solves another problem. Form is scrollable by default on the Y axis. Scrollability for Codename One components and native widgets (e.g. web) can collide so by using the border layout you implicitly disable scrolling which in this case might provide superior UX.

Note that you can get the code above to work by overriding calcPreferredSize() in BrowserComponent and returning the size you want for the component. I don't think this will result in a good UX because of scrollability issues.

Embed Codenameone Youtube Video

1 Answers