React-native-render-html: Embedded videos not working

Created on 22 Feb 2018 · 12Comments · Source: meliorence/react-native-render-html

Ive tried using a webview

alterNode(node) {
const { name, parent } = node;
if(name == 'iframe' ) {
return source={{uri: 'https://www.youtube.com/embed/mUDKuQ8vNf8'}}
style={{height: 100, width: 100}} // OR style={{height: 100, width: 100}}
/>
}
}

im rendering an html string, the idea is to render the iframe's, but just shows a white portion

question

Source

narc88

👍1

Most helpful comment

Your iframe may have fixed width and height, the following code will eliminate this problem

staticContentMaxWidth={width}
alterChildren={node => {
if (node.name === "iframe" || node.name === "img") {
 delete node.attribs.width;
 delete node.attribs.height;
}
  return node.children;
}}

tmtung144 on 12 Feb 2019

👍13 ❤1 🎉1

All 12 comments

Hi,
<iframe> is already being rendered inside a WebView with the default renderer supplied in this plugin. You don't have to use the alteration props to make it work.

Just render an <iframe> with a proper source, and you're done. You might want to make sure it doesn't overflow from your app with the staticContentMaxWidth prop.

Exilz on 26 Feb 2018

When using

const html = '<iframe allowfullscreen="" frameborder="0" height="349" src="https://www.youtube.com/embed/eEupgmLx714" width="560"></iframe>';

It seems like staticContentMaxWidth doesn't work.
"react-native-render-html": "^3.7.0",

EDIT: My bad, introduced in 3.8.X

LouisJS on 7 Mar 2018

👍3

Tested with 3.10.0 version and staticContentMaxWidth doesn't work with iframe

dzpt on 3 Feb 2019

Your iframe may have fixed width and height, the following code will eliminate this problem

staticContentMaxWidth={width}
alterChildren={node => {
if (node.name === "iframe" || node.name === "img") {
 delete node.attribs.width;
 delete node.attribs.height;
}
  return node.children;
}}

tmtung144 on 12 Feb 2019

👍13 ❤1 🎉1

Youtube video still not played, is anyone here can embed youtube video and play it?

achimbaggins on 1 Nov 2019

😕1

@achimbaggins tmtung144 's solution works perfectly for me

desis123 on 14 Jan 2020

@tmtung144 Thanks, dude solution works for me perfectly.

Sadhr on 13 Apr 2020

Your iframe may have fixed width and height, the following code will eliminate this problem
staticContentMaxWidth={width}
alterChildren={node => {
if (node.name === "iframe" || node.name === "img") {
 delete node.attribs.width;
 delete node.attribs.height;
}
  return node.children;
}}

You saved my day. Thanks a lot

vinhdothe93 on 1 May 2020

there is any way to make videos use fullscreen ?

Sadhr on 5 May 2020

👍3

I join the question of @Sadhr does anyone know how to make YouTube videos viewable in full screen on Android?

vojeda on 31 May 2020

Still getting crash with iFrame.
@tmtung144 can you plz tell me in which version iFrame dosen't crash in Android.
my react-native-render-html version is 4.2.2

pragneshpj on 27 Jul 2020

Still getting crash with iFrame

Probably an instance of this react-native-screens bug: https://stackoverflow.com/a/63171413/2779871

does anyone know how to make YouTube videos viewable in full screen on Android?

As for version 5 of react-native-render-html with @native-html/iframe-plugin, you can set allowsFullscreenVideo like so:

import iframe from '@native-html/iframe-plugin';
import HTML from 'react-native-render-html';
import WebView from 'react-native-webview';

const renderers = {
  iframe
}

// ...

<HTML renderers={renderers}
      WebView={WebView}
      source={{ html: '<iframe ...></iframe>' }}
      renderersProps={{ iframe: { webViewProps: { allowsFullscreenVideo: true } }}}
/>