Youtube Video is not loaded in WebView - webview

Question

I want to display a list of Youtube Video using ListView and WebView. But Videos are not loaded.
WebView always shows An Error Occured as the picture below:
Currently I don't know how to bind URL directly to WebView in AXML file, therefor I customized a BindableWebView instead:
public class BindableWebView : WebView
{
public BindableWebView(Context context, IAttributeSet attrs)
: base(context, attrs)
{
}
private string _webViewContent;
public string WebViewContent
{
get { return _webViewContent; }
set
{
_webViewContent = value;
LoadHtmlString();
}
}
private void LoadHtmlString()
{
LoadData(WebViewContent, "text/html", "utf-8");
}
}
This is Layout AXML file:
<dc.AlphaLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxBind="Click ItemClickCommand">
<!--Video Thumbnail-->
<FrameLayout
android:layout_width="#dimen/ProductImageWidth"
android:layout_height="#dimen/ProductImageHeight"
android:layout_margin="#dimen/ExtraNewsImagePadding">
<BindableWebView
android:id="#+id/playerWebView"
android:layout_width="match_parent"
android:layout_height="match_parent"
local:MvxBind="WebViewContent Video.YoutubeUrl" />
</FrameLayout>
<LinearLayout
.....
</LinearLayout>
</dc.AlphaLinearLayout>
This is Video Model:
namespace ....Shared.Models
{
public class Video
{
public string YoutubeId { get; set; }
public string YoutubeImageUrl => $"https://img.youtube.com/vi/{YoutubeId}/0.jpg";
public string YoutubeUrl => $"<iframe width=\"100%\" height=\"100%\" src=\"https://www.youtube.com/embed/{YoutubeId}\" frameborder=\"0\" allowfullscreen></iframe>";
public Guid NewsId { get; set; }
}
}
And VideoListViewm in C#:
namespace DeHeus.Droid.Views
{
public class VideoListView : DetailViewWithShare
{
protected override int LayoutId => Resource.Layout.VideoListView;
private CustomMvxListView _videoListview;
protected override void InitView(View view)
{
_videoListview = view.FindViewById<CustomMvxListView>(Resource.Id.videoList);
_videoListview.ItemTemplateId = Resource.Layout.VideoListItemView;
}
protected override void CreateBinding()
{
var bindingSet = this.CreateBindingSet<VideoListView, VideoListViewModel>();
bindingSet.Bind(_videoListview.Adapter)
.For(v => v.ItemsSource)
.To(vm => vm.VideoItemViewModels);
bindingSet.Bind(_videoListview)
.For(v => v.ScrollToBottom)
.To(vm => vm.ScrollToBottomCommand);
bindingSet.Apply();
}
}
}
Running debug, the WebViewContent gets exact Url but I don't know why it doesn't work as I thought: "<iframe width=\"100%\" height=\"100%\" src=\"https://www.youtube.com/embed/usoFYAqOMyA\" frameborder=\"0\" allowfullscreen></iframe>"
Does anyone has idea?
Thanks

Answer 1

Done a lot of researching and I have finally solved the issue.
All you need is putting SetWebChromeClient(new WebChromeClient()); before LoadData
public BindableWebView(Context context, IAttributeSet attrs)
: base(context, attrs)
{
WebSettings settings = this.Settings;
settings.JavaScriptEnabled = true;
SetWebChromeClient(new WebChromeClient());
}
private string _webViewContent;
public string WebViewContent
{
get { return _webViewContent; }
set
{
_webViewContent = value;
LoadHtmlString();
}
}
private void LoadHtmlString()
{
LoadData(WebViewContent, "text/html", "utf-8");
}