Embedded youtube video shows correctly in iOS but not on Android

luispa...@outlook.com

unread,

Oct 25, 2018, 2:29:54 PM10/25/18

to CodenameOne Discussions

I'm having a problem to show embedded youtube video on Android. The area of the video is left blank, but if I tap the overflow menu and then double tap the location of video, the video appears. On simulator and iOS, the youtube video shows correctly.

If I change the height style of the iframe to another unit (px or em), the video appears but the size between devices isn't consistent.

I'm using the BrowserComponent to show the embedded youtube video, the component is inside the BoxLayoutY and I'm overriding a method because the vertical size of the BrowserComponent was big. I'm using the Gui Builder and here is the code:

```java

public com.codename1.ui.Component create_bcVideo() {
    return new com.codename1.ui.BrowserComponent() {
        @Override
        protected Dimension calcPreferredSize() {
            int w = Display.getInstance().getDisplayWidth();
            int h = (int) (Display.getInstance().getDisplayHeight() * 0.4);

            return new Dimension(w, h);
        }
    };
}

```

And here is the code to show the embedded video in the component:

```java

private void loadVideo() {
String page = "<html style='background-color:#e7e8e9;'><body><iframe style='width:100%; height:90%; display:block;' src='" + linkVideo + "' frameborder='0' allow='autoplay; encrypted-media' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></body></html>";
((com.codename1.ui.BrowserComponent)gui_bcVideo).setPage(page, null);
}

```

Shai Almog

unread,

Oct 26, 2018, 12:06:25 AM10/26/18

to CodenameOne Discussions

Is this related to this stackoverflow question?

https://stackoverflow.com/questions/52983341/codename-one-web-view-appears-on-iphone-but-not-android

luispa...@outlook.com

unread,

Oct 26, 2018, 2:21:02 PM10/26/18

to CodenameOne Discussions

I followed the instructions in the link you passed, I set the user agent of the component, changed the video url to another url, and increased the size of the component but the video still doesn't appear on Android. On the simulator and on iOS the embedded video appears.

Shai Almog

unread,

Oct 27, 2018, 12:36:10 AM10/27/18

to CodenameOne Discussions

Do you see the browser component just without the video?

Try this HTML "

<html><body>Video From YouTube<br><iframe width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/47yJ2XCRLZs\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

From https://stackoverflow.com/a/45167480/756809

luispa...@outlook.com

unread,

Oct 29, 2018, 4:43:01 PM10/29/18

to CodenameOne Discussions

The problem is when I put the height style of the iframe as percent unit the video doesn't appear (but still occupies space), but if I put another unit (px, em) the video appears. For example, this code doesn't show the video on Android:

page = "<html style='background-color:#e7e8e9;'><body><iframe style='width:100%; height:90%; display:block;' src='" + linkVideo + "' frameborder='0' allow='autoplay; encrypted-media' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></body></html>";

But this code shows the video on Android (I changed the percent unit to px), but the size between devices isn't consistent (in some devices the video appears with scrollbar):
int h = (int) (Display.getInstance().getDisplayHeight() * 0.20);
page = "<html style='background-color:#e7e8e9;'><body><iframe style='width:100%; height:" + h + "px; display:block;' src='" + linkVideo + "' frameborder='0' allow='autoplay; encrypted-media' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></body></html>";

Shai Almog

unread,

Oct 30, 2018, 12:51:52 AM10/30/18

to CodenameOne Discussions

This is probably because the size of the browser is unknown when that code runs so percentages won't make sense. I'm not really sure how one would trigger a reflow in that case.

Reply all

Reply to author

Forward