title: Display Vimeo in WebView iFrame on Android
body: <p>I am trying to create an app that displays a WebView with an embedded iframe that will show a Vimeo video.  When I load the WebView the iframe is just a black box that will not show the video or do anything when I click on it.  </p>
  
  <pre><code>mWebView = (WebView)v.findViewById(R.id.webView);
  mWebView.getSettings().setAllowFileAccess(true);
  mWebView.getSettings().setBuiltInZoomControls(true);
  mWebView.getSettings().setSupportZoom(true); 
  mWebView.getSettings().setUseWideViewPort(true);
  mWebView.getSettings().setLoadWithOverviewMode(true);
  mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
  
  mWebView.getSettings().setSaveFormData(true);
  mWebView.getSettings().setJavaScriptEnabled(true);
  
  String data = new String("&lt;html xmlns='http://www.w3.org/1999/xhtml' xmlns:fb='http://ogp.me/ns/fb#'&gt;&lt;head&gt;" +
  "&lt;meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /&gt;" +
  "&lt;title&gt;Northern African and Middle Eastern Peoples &lt;/title&gt;" +
  "&lt;link rel='stylesheet' href='./style.css' type='text/css' media='screen' /&gt;&lt;/head&gt;&lt;body&gt;" +
  "&lt;div id='content'&gt;&lt;div class='post'&gt;" + 
  
  "&lt;iframe style='margin-top:10px; margin-bottom:10px;' src=http://player.vimeo.com/video/" + mRssVideoItem.getVimeoId() + "?title=0&amp;byline=0&amp;portrait=0' width='880' height='497' frameborder='0'&gt;" +
  "&lt;/iframe&gt;&lt;h1&gt;" + mRssVideoItem.getTitle() + "&lt;/h1&gt;&lt;div class='timestamp'&gt;" + formattedDate + "&lt;/div&gt;" + mRssVideoItem.getDescription() + "&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;"); 
  
  mWebView.setWebViewClient(new WebViewClient(){
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
      return false;
  }
  });
  mWebView.loadDataWithBaseURL("file:///android_asset/.", data, "text/html", "UTF-8", null);
  </code></pre>
  
  <p>I have searched for several days and can not find anything that helps.</p>
  
  <p><strong>Update:</strong>  I am still struggling with this.  I have a couple of different things going on that I don't quite understand.  First I thought I had the Vimeo Videos working using the suggestion below.  However, I came back to the project today and am just seeing a black box.  Another problem is the "scaling" of the view.  Sometimes when I load the video, the entire view appears in the screen.  Other times it is like the image is zoomed it and the words are much larger than I thought.  It also seems to change when I alter rotation of the device.  Below is the HTML I am using with loadDataWithBaseURL.</p>
  
  <p>http://www.w3.org/1999/xhtml' xmlns:fb='<a href="http://ogp.me/ns/fb#" rel="nofollow noreferrer">http://ogp.me/ns/fb#</a>'>Northern African and Middle Eastern Peoples <h1>No One But God</h1>May 14, 2013A young Syrian father shares the story of his family's escape from the Syrian civil war and their struggles finding a new life in Jordan.</p>
  
  <hr>
  
  <p>The suggestion above seems to work as long as I don't change the WebSettings LayoutAlgorithm to NARROW_COLUMNS.  Does anyone know why this would not allow the video to show up? A second question is sometimes when the "page" loads everything looks great and other times the content  is really big and the image goes off the side of the screen.  It seems it may have something to do with rotation and scaling or initialization since if I rotate to landscape and back to portrait, the image seems to correct itself.  See images below. </p>
  
  <p><img src="https://i.stack.imgur.com/u7O2D.png" alt="Good Image"></p>
  
  <p><img src="https://i.stack.imgur.com/UuDBX.png" alt="Bad Image"></p>