如何在 webview android 中调整 youtube 视频的大小？答案

【问题标题】：How to resize youtube video in webview android?如何在 webview android 中调整 youtube 视频的大小？
【发布时间】：2015-12-06 19:09:31
【问题描述】：

我正在阅读我的应用程序中的提要。我可以阅读所有的图片、文字……我也可以阅读 youtube 视频。我的问题是我可以看到youtube视频的框架尺寸更大，我希望这个框架可以调整到webview

看起来是这样的......

有人知道如何调整 youtube 视频的框架以将其调整为 web 视图吗？？

提前致谢

这是我的原始文件夹中的 html：

<html>
<head>
    <title>News</title>
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
        body {
        max-width: 100%;
        margin: 0px 0px; padding:0px;
        text-align: left;
        margin-bottom: 10px;
        }

        #base {
        overflow: hidden;
        width: 87.5%;
        margin:0px auto;
        }

        #header {
        border-bottom: 2px solid #f29a2e;
        line-height: 1;
        }

        #writter {
        border-bottom: 2px solid #f29a2e;
        line-height: 1;
        }

        .title {

        color: #333;
        font-size: 25px;
        }

        .pubDate {
        color: #A1A1A1;
        text-align: left;
        font-size: 14px;
        }

        .redac {
        color: #A1A1A1;
        text-align: left;
        font-size: 14px;
        }

        .image {
        max-width: 87.5%;
        margin-top:10px;
        margin-bottom:10px;
        }

        img, ul, ol {
        display: block;
        max-width:100%;
        margin-top:10px;
        margin-bottom:10px;
        }

        .content {
        text-align:left;
        <!--word-wrap:break-word;-->
        font-size:16px;
        color: #333
        }

        a {
        color: #468CFF;
        text-decoration: none;
        }

    </style>
</head>
<body>
<div id="base">
    <div id="header">
        <div class="title">
            <p>_TITLE_</p>
        </div>
        <table>
            <td>
                <div class="pubDate">
                    <p>_PUBDATE_</p>
                </div>
            </td>
        </table>
    </div>
    <div id="writter">
        <div class="redact">
            <p>_REDACTOR_</p>
        </div>
    </div>
    <div class="content">
        <p>_CONTENT_</p>
    </div>
</div>
</body>
</html>

调用webview的Java类

 private void populateWebView() {
        WebView webview = (WebView) findViewById(R.id.articulo_Webview);
        webview.setWebChromeClient(new WebChromeClient());
        webview.getSettings().setLoadWithOverviewMode(false);
        webview.getSettings().setUseWideViewPort(true);
        webview.loadDataWithBaseURL(null, "<!DOCTYPE HTML>"
                + populateHTML(R.raw.htmlnoticia), "text/html", "UTF-8", null);
        WebSettings webSettings = webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }

    private String populateHTML(int resourceID) {
        String html;
        html = readTextFromResource(resourceID);
        html = html.replace("_TITLE_", articulo.getTitulo());
        html = html.replace("_PUBDATE_", "" + articulo.getFecha());
        html = html.replace("_CONTENT_", articulo.getContenido());
        html = html.replace("_REDACTOR_", articulo.getRedactor());
        return html;
    }

    private String readTextFromResource(int resourceID) {
        InputStream raw = getResources().openRawResource(resourceID);
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        int i;
        try {
            i = raw.read();
            while (i != -1) {
                stream.write(i);
                i = raw.read();
            }
            raw.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return stream.toString();
    }

将 xml 布局到 webView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
        <WebView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/articulo_Webview">
        </WebView>
</LinearLayout>

【问题讨论】：

标签： android webview youtube feed

【解决方案1】：

我找到了解决方案。在 .html 中添加这个

iframe {
        display: block;
        max-width:100%;
        margin-top:10px;
        margin-bottom:10px;
        }

【讨论】：

不错！我将此添加到一个 .css 文件中，用于设置 WebView html 内容的样式
很棒的解决方案，它也适用于嵌入视频。

【解决方案2】：

使用它来调整 html 图片大小以及 youtube 和所有社交媒体框架大小

@SuppressLint("NewApi")
private void openWebView(String data) {
   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        wv_description.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
    } else {
        wv_description.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
    }
    wv_description.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
    wv_description.getSettings().setJavaScriptEnabled(true);
    wv_description.loadDataWithBaseURL("file:///android_asset/", getHtmlData(data), "text/html", "utf-8", null);
}

private String getHtmlData(String bodyHTML) {
        String head = "<head><style>img{max-width: 100%; width:auto; height: auto;} iframe { display: block; max-width:100%; border: 0; width: 100%; height:95%; padding:0px; margin:0px;}</style></head>";
        return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
    }

【讨论】：