CODEWITHSUNDEEP
xamarinyoutube
JSilvanus
JSilvanus

Reputation: 145

Youtube Fullscreen without Iframe

Related to: YouTube iframe embed - full screen

Is it possible to pass the allowFullscreen without iframe? I'm developing for Xamarin and I'm using a WebView that simply opens the embed url itself, I don't see the need for iframe here, but I'd like to have the fullscreen possibility...

Upvotes: 0

Views: 420

Answers (1)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10356

To enable full-screen support in a Xamarin Forms WebView for Android, you can create custom fullScreen_webview to do.

 public class FullScreenEnabledWebView : WebView
{
    /// <summary>
    /// Bindable property for <see cref="EnterFullScreenCommand"/>.
    /// </summary>
    public static readonly BindableProperty EnterFullScreenCommandProperty =
        BindableProperty.Create(
            nameof(EnterFullScreenCommand),
            typeof(ICommand),
            typeof(FullScreenEnabledWebView),
            defaultValue: new Command(async (view) => await DefaultEnterAsync((View)view)));

    /// <summary>
    /// Bindable property for <see cref="ExitFullScreenCommand"/>.
    /// </summary>
    public static readonly BindableProperty ExitFullScreenCommandProperty =
        BindableProperty.Create(
            nameof(ExitFullScreenCommand),
            typeof(ICommand),
            typeof(FullScreenEnabledWebView),
            defaultValue: new Command(async (view) => await DefaultExitAsync()));

    /// <summary>
    /// Gets or sets the command executed when the web view content requests entering full-screen.
    /// The command is passed a <see cref="View"/> containing the content to display.
    /// The default command displays the content as a modal page.
    /// </summary>
    public ICommand EnterFullScreenCommand
    {
        get => (ICommand)GetValue(EnterFullScreenCommandProperty);
        set => SetValue(EnterFullScreenCommandProperty, value);
    }

    /// <summary>
    /// Gets or sets the command executed when the web view content requests exiting full-screen.
    /// The command is passed no parameters.
    /// The default command pops a modal page off the navigation stack.
    /// </summary>
    public ICommand ExitFullScreenCommand
    {
        get => (ICommand)GetValue(ExitFullScreenCommandProperty);
        set => SetValue(ExitFullScreenCommandProperty, value);
    }
    private static async Task DefaultEnterAsync(View view)
    {
        var page = new ContentPage
        {
            Content = view
        };
        await Application.Current.MainPage.Navigation.PushModalAsync(page);           
    }
    private static async Task DefaultExitAsync()
    {
        await Application.Current.MainPage.Navigation.PopModalAsync();         
    }
}

More detailed info about enable full-screen support in xamarin.android Webview, you can take a look this sample:

https://github.com/microsoft/CSSClientAppsXamarinSampleCode/tree/main/FullScreenWebView

You can click Iframe in the red box at the bottom right to full-screen, the screenshot: enter image description here

Upvotes: 2

Related Questions