react-native-webview: Videos in iFrame do not work in webview

I have a problem with playing video wrapped to iFrame from YouTube and Instagram. A problem is in Android. Ios works fine.

So, when I put inframe into webview it looks ok. Until i click on play button. Video start load all native buttons are available and sound works fine but the movie is black. But sound and stop/play buttons works

We use react-native-cli: 2.0.1 react-native: 0.57.5 and “react-native-webview”: “^2.12.1”

I prepared a simple demo where that videos don’t work:

render() {
    return (
      <WebView
        originWhitelist={['*']}
        useWebKit={false}
        source={{
          html: `
          XX
          <div>
            <iframe width="320" height="240" src="https://www.youtube.com/embed/li8yILhFFZM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
          </div> `

        }}
      />

    );
  }
}

and screenshot of the problem: screenshot 2018-11-23 at 17 33 22

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 51 (4 by maintainers)

Most upvoted comments

set as below androidHardwareAccelerationDisabled={false}

it works for me

poonamdhomane on Oct 15, 2020

I have tried to fix that issue by adding both attributes. However, mixedContentMode='always' does not work for me and An app crashed after the androidHardwareAccelerationDisabled={false} when it navigate between web-views. does anyone have the same problem with the above configuration?

dushmantha on Apr 28, 2021

Add “androidLayerType={‘hardware’}” it work for me.

       <WebView
            source={{
              uri: `https://www.youtube.com/embed/${_videoId}?playsinline=1`,
            }}
            androidLayerType={'hardware'}
            allowsFullscreenVideo={true}
            mediaPlaybackRequiresUserAction
            useNativeResumeAndPauseLifecycleEvents
            javaScriptEnabled
            allowsInlineMediaPlayback
            useWebKit={true}
            originWhitelist={['*']}
            automaticallyAdjustContentInsets
            onError={(e: any) => {
              setState({
                ...state,
                error: e.error,
              });
            }}
            onLoadEnd={() =>
              setState({
                ...state,
                isReady: true,
              })
            }
    />

sangolariel on Jul 27, 2021

@NetPumi2 @Titozzz @wendelfreitas @jamonholmgren HI everyone, this library https://github.com/teamairship/react-native-android-fullscreen-webview-video fixing the problem with fullscreen video on the Android (in my case). Can you check it and add functionality to this repo if everything will be ok?

naxel on Dec 10, 2018

set as below mixedContentMode=‘always’

it works for me

MarinaAmy on Oct 28, 2020

I tried “react-native-webview”: “8.2.1” and “9.0.1” (latest); this issue triggers on all videos both in emulator (used Android Studio emulator with Android Oreo) and on physical device (Alcatel 4.x.x KitKat).

The (almost) minimum App.js code to reproduce is:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <WebView
        source = {{ html:
          "<h1>VIDEO TEST</h1>"+
          "<video width='100%' height='80%' class='video' controls='' preload='none'>"+
            "<source src='http://example.org/video.mp4' type='video/mp4'>"+
          "</video>"
        }}
        startInLoadingState = {true}
        allowsInlineMediaPlayback = {true}
      />
    );
  }
}
And the mp4 url I used plays and shows okay on desktop Firefox and on Android emulator Chrome.

I’m having the exact same problem! any luck finding a solution?

lrondanini on Jul 3, 2020

mixedContentMode do not work for me

and about setWebChromeClient this is already setup in this repo
https://github.com/react-native-community/react-native-webview/blob/48230e4dcff2ad234d2617026924d07e106c2022/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java#L400

NetPumi2 on Nov 27, 2018

@jkustan Thanks for the detailed report. So far I’ve been unable to reproduce this on anything but an emulator and just chalked it up to emulator issues since those things are pretty flaky to begin with. Could you include some more detail about the physical devices you are seeing this on? Anything that looks related in the logs on that device when the video starts playing?

smathson on Jan 31, 2019

i use android simulator have the black problem，after i use true android phone everything is well！（sorry for my poor english）

Wangzihao5325 on Dec 19, 2018

@wendelfreitas Yes fullscreen do not work too. I google it a lot but I didn’t find anything similar

NetPumi2 on Nov 27, 2018

Thanks for reporting, anyone want to dive in and see if they can figure this out? (Might involve a bunch of Googling first to see if it’s a known problem with Android webview…)

jamonholmgren on Nov 27, 2018