Menu
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?
907
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
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
