'react native render-html video display

hello i have a problem with render-html

I have a news app, which is receiving information from a web page. As usual, the posts have content such as images and videos. everything is fine with the images, but with youtube videos or similar, it only shows the cover photo.

I would like the videos to be able to play normally.

this is my code:

<HTML 
   source={{html:post.content}} 
   tagsStyles={tagStyles} 
   contentWidth={contentWidth}
   onPress = {(event, href)=>{
   Linking.openURL(href)
   }}
/>

and this is an example of the tags I receive:

<div  id="_ytid_80279"  width="800" height="450"  data-origwidth="800" data-origheight="450" data-facadesrc="https://www.youtube.com/embed/7wiINdmIJl4?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;modestbranding=1&#038;rel=0&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;" class="__youtube_prefs__ epyt-facade epyt-is-override  no-lazyload" data-epautoplay="1" ><img class="epyt-facade-poster" loading="lazy"  alt="YouTube player"  src="https://i.ytimg.com/vi/7wiINdmIJl4/maxresdefault.jpg"  /><button class="epyt-facade-play" aria-label="Play"><svg data-no-lazy="1" height="100%" version="1.1" viewBox="0 0 68 48" width="100%"><path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path><path d="M 45,24 27,14 27,34" fill="#fff"></path></svg></button></div>
</div>

image of how the cover of the video looks

Warnin that i receive:

The "button" tag is a valid HTML element but is not handled by this library. You must extend the default HTMLElementModel for this tag with "customHTMLElementModels" prop and make sure its content model is not set to "none".

I was looking for information and I did not find content that can help me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'react native render-html video display

Sources

Related Questions