Make webview transparent

Ionic Framework
1

Hello,

I am using a plugin https://github.com/cordova-rtc/cordova-plugin-iosrtc to display the user’s camera stream . The plugin creates the video with the stream in a native ios video tag and we places the video behind the ionic webview. For the user to be able to see the video stream, the ionic content and body must be transparent.

Is there a way to make the content and body transparent in ionic v5 for iOS? I’ve added

background: transparent !important;
background-color: transparent !important;
 --ion-background-color: transparent !important;
 --ion-background: transparent !important;

to the ion-content , the body and html tags, but the background is still white.

1 Like
2

Where do you got the --ion-background Variable from? :smiley: As you can read here the correct key should be –background

3

Thanks, that was a typo in the post, i am using the following css

background: transparent !important;
background-color: transparent !important;
 --ion-background-color: transparent !important;
 --background: transparent !important;

i got the --ion-background-color from here

4

The Google Maps Plugin works the same and as far as i know does it set every item to transparent, starting from the html Element :thinking:

1 Like
5

thanks, i didn’t know that, will try to find out how they do it and replicate it in my app.

6

hi @akilud , i understand , but there is some declare variables, which need to be define.
Ping me on skpe full code so that i can help you into this

Troy
cis.troy

7

Thanks for the offer, but i got it working.

The only css change needed are

  • add --background: transparent to the ion-content tag
  • add --background: transparent to the video tag
  • remove poster image from the video tag.

No need to change the css for the html body or other elements.

2 Likes