Can You Scale the Content of a WebView Control to Fit the Container - maui

Question

I'm using a WebView control on a page in my MAUI app and I would like the content of the page (a video) to scale to fit the container size. Currently it spills over and it's not obvious (or useful really) that a user would have to scroll the video up and down and side to see it. Can the content be scaled to fit the container dimensions?
Here's a short example based on standard new .MAUI project. This is the page markup:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp2.MainPage">
<Grid
x:Name="MainGrid"
RowDefinitions="50,*"
ColumnDefinitions="*">
<Button
Grid.Row="0"
Grid.Column="0"
x:Name="CounterBtn"
HeightRequest="40"
Text="Click me"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
<VerticalStackLayout
Grid.Row="1"
Grid.Column="0"
Spacing="25"
Padding="30,0">
<Border
Grid.Row="1"
Grid.Column="0"
Grid.RowSpan="3"
Stroke="Black"
StrokeThickness="3"
x:Name="WebBorder">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<VerticalStackLayout
BackgroundColor="White">
<Image
x:Name="CloseBtn"
Margin="5,5,0,0"
HorizontalOptions="Start"
Source="close_button.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="CloseButton_Clicked"/>
</Image.GestureRecognizers>
</Image>
<WebView
x:Name="WebView"/>
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</Grid>
</ContentPage>
The only thing I don't have for you (since I can't add an attachment) is the close button png file. This is stuff added to the code behind:
private async void OnCounterClicked(object sender, EventArgs
e)
{
//display the container
WebView.IsVisible= true;
WebView.HeightRequest =
DeviceDisplay.Current.MainDisplayInfo.Height - 60;
WebView.WidthRequest =
DeviceDisplay.Current.MainDisplayInfo.Width - 20;
WebView.Margin = new Thickness(5, 0, 5, 0);
//show the video
WebView.Source =
"https://www.youtube.com/shorts/JSIqFdb4KQ8";
WebView.HeightRequest = WebView.HeightRequest -
CloseBtn.Height - 10;
for (int i = 0; i < 2; i++)
{
await CloseBtn.RotateTo(180, 200);
await CloseBtn.RotateTo(0, 200);
}
}
private void CloseButton_Clicked(object sender, EventArgs e)
{
//hide it a
WebView.IsVisible= false;
}
When the video plays it is much larger than the viewport of the device. I'm looking for a method or way to scale the content contained in the WebView to be 100% of the WebView's size.

Answer 1

Do you mean the space of the VerticalStackLayout of your code?
I tried to remove the Padding and Spacing of the VerticalStackLayout in your code,then there is no such problem.
Spacing="25"
Padding="30,0"
You can refer to the following code I tested on my side:
<Grid
x:Name="MainGrid"
BackgroundColor="Red"
RowDefinitions="50,*"
ColumnDefinitions="*"
>
<Button
Grid.Row="0"
Grid.Column="0"
x:Name="CounterBtn"
HeightRequest="40"
Text="Click me"
HorizontalOptions="Center" />
<VerticalStackLayout
Grid.Row="1"
Grid.Column="0"
BackgroundColor="Blue">
<Border
Grid.Row="1"
Grid.Column="0"
Grid.RowSpan="3"
Stroke="Black"
StrokeThickness="3"
x:Name="WebBorder">
<Border.StrokeShape>
<RoundRectangle CornerRadius="5" />
</Border.StrokeShape>
<VerticalStackLayout
BackgroundColor="White">
<Image
BackgroundColor="Yellow"
x:Name="CloseBtn"
Margin="5,5,0,0"
HorizontalOptions="Start"
Source="dotnet_bot.svg">
</Image>
<!--<WebView
x:Name="WebView"/>-->
<WebView HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Source="https://dotnet.microsoft.com/apps/xamarin" />
</VerticalStackLayout>
</Border>
</VerticalStackLayout>
</Grid>