Vimeo video in fullscreen landscape webview

Question

I'm trying to correctly display a Vimeo video in a fullscreen landscape activity. The video has "strange" white margin on top and bottom.

These are the webview settings:

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

I inject with:

webView.loadDataWithBaseURL("https://vimeo.com", html, "text/html", "UTF-8", null);

And this is the HTML:

<html>

<head>
    <meta http-equiv="Content-Security-Policy"
        content="default-src * gap:; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; img-src * data: blob: android-webview-video-poster:; style-src * 'unsafe-inline';">
</head>

<body style="margin: 0; padding: 0">
    <iframe src="https://player.vimeo.com/video/445319847" webkitallowfullscreen mozallowfullscreen allowfullscreen
        width="100%" height="100%" margin="0" padding="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" ,
        frameborder="0" scrolling="no">
    </iframe>
</body>

</html>

I added the meta content, reading this console log:

"Refused to load the image 'android-webview-video-poster:default_video_poster/5386880230549634306' because it violates the following Content Security Policy directive: "img-src 'self' data: https://i.vimeocdn.com https://secure-b.vimeocdn.com https://f.vimeocdn.com https://vimeo.com https://secure.gravatar.com https://i0.wp.com https://i1.wp.com https://i2.wp.com https://pagead2.googlesyndication.com https://player.vimeo.com https://.ci.vimeows.com https://f.vimeocdn.com".", source: https://player.vimeo.com/video/445319847 (0)*

And then landing on this answer. BTW the warning is not disappearing and the fix seems not to work. Any ideas? Many thanks.

EDIT: if it's not possible to have the player exactly fullscreen, how can I fullfill the white space with e.g. black?

How did you fix the issue? I am getting the same warning "Refused to load the image 'android-webview-video-poster:default_video_poster/-3248712023037699476' because it violates the following Content Security Policy directive: "img-src 'self' data — Jyo, Oct 06 '20 at 07:09
So is your app live on play store? Won't there be any issue if you still have the warning? Will not play store have any problem with this? As I see this is Security Policy issue I was wondering if we can really ignore this warning. — Jyo, Oct 09 '20 at 01:23
Today I'll try a native approach via API and PRO Vimeo account. — Jumpa, Oct 09 '20 at 06:57
Do let me know how it worked for you and if it still gave you the same warning. — Jyo, Oct 10 '20 at 04:12
I've gave up on using webview as it's not officially supported by Vimeo. I've setup Exoplayer + vimeo-networking-java embedding an access token to play my own videos. — Jumpa, Oct 11 '20 at 05:09

snachmsm · Answer 1 · 2020-08-21T10:26:14.610

2

nothing strange in here. iframe is fulfiling your WebView (width="100%" height="100%" no html margins, padding etc.), which is drawn at size of screen. Whole screen, also below status bar, thus not equal white margins (I bet you are using fitsSystemWindows attr)

iframe is loading webpage src="https://player.vimeo.com/video/445319847" and this page contains player which is trying to fulfil frame (in this case fit width), but keeps aspect ratio and center player itself

Fix: make some native player (recomending ExoPlayer) and load direct video file link into, some example how to extract mp4 link in HERE

edited Aug 21 '20 at 10:26

answered Aug 21 '20 at 10:20

snachmsm

17,866
3
32
74

is it possible to fullfill the white with black? – Jumpa Aug 21 '20 at 10:29
you may try to add some background to your HTML code or use `webview.setBackgroundColor`, but this white background may be also determined by code loaded into `iframe` (`src` link) – snachmsm Aug 21 '20 at 10:53

Vimeo video in fullscreen landscape webview

1 Answers1