css - iFrame Border Showing in WebView React Native -

in attempts dynamically add youtube videos react native app, chose use combination of webview , iframe since current react-native-youtube component doesn't work rn 16^. ultimately, solution work, iframe border still shows , not go away (even css or frameborder = 0), nor can change it's color css. ideas? here's code:

video-preview component (where users can see video, title, etc before tapping):

module.exports = react.createclass({   render: function() {       return (         <touchablehighlight            style={styles.touchcard}           underlaycolor={'transparent'}           onpress={this.props.onpress} >            <view style={styles.card}>             <webview                 style={styles.videopreview}                 automaticallyadjustcontentinsets={true}                 scrollenabled={false}                 style={styles.videopreview}                 html={this.props.source}                 renderloading={this.renderloading}                 rendererror={this.rendererror}                 automaticallyadjustcontentinsets={false} />               <view style={[styles.container, this.border('organge')]}>                   <view style={[styles.header, this.border('blue')]}>                       <text style={[styles.previewtext]}>{this.props.text}</text>                   </view>                   <view style={[styles.footer, this.border('white')]}>                     <view style={styles.sourcerow}>                       <view style={[this.border('white')]}>                         <imagebutton                             style={[styles.logobtn, , this.border('red'), styles.row]}                             resizemode={'contain'}                             onpress={this.onheartpress}                             source={this.props.src} />                       </view>                       <view style={[this.border('white')]}>                           <text style={[styles.rowtext, {fontweight: 'bold'}]}>{this.props.entrybrand}</text>                           <text style={[styles.rowtext]}>{this.props.views}</text>                       </view>                     </view>                     <view style={[styles.heartrow, this.border('black')]}>                       <keywordbox                            style={[styles.category, this.border('blue')]}                           key={this.props.key}                            text={this.props.category}                            onpress={this.props.categorypress}                           selected={this.props.selected} />                     </view>                   </view>               </view>             </view>         </touchablehighlight>       ); 

which looks this:

and input iframe html webview looks this:

<iframe style='border: 0;border-width: 0px;' scrolling='no' frameborder='0' width='320' height='300' src='https://www.youtube.com/embed/2b_qp9jgd7q'></iframe> 

here's styling:

var styles = stylesheet.create({   centertext: {     marginbottom:5,     textalign: 'center',   },   noresultstext: {     margintop: 70,     marginbottom:0,     color: '#000000',   },   sourcerow: {     justifycontent: 'space-around',      flexdirection: 'row',    },    rowtext: {     textalign: 'left',     color: 'white',      fontsize: 12,      marginleft: 5,      fontfamily: 'sfcompacttext-medium'   },    detailtext: {     fontfamily: 'sfcompacttext-light',     fontsize: 18,     color: 'white',      textalign: 'left',      margintop: 2,      marginleft: 5,    },    touchcard: {     margin: 3,      width: window.width*0.95,      shadowoffset: {width: 2, height: 2},     shadowopacity: 0.5,     shadowradius: 3,     alignself:'center',    },    card: {     flex: 1,      width: window.width*0.98,      alignself:'center',    },    hearttext: {     color: 'white',      fontsize: 12,      fontweight: 'bold',     alignself: 'center',      fontfamily: 'sfcompacttext-medium'   },    heartrow: {     flexdirection: 'row',      justifycontent: 'space-around',      alignself: 'center',      justifycontent: 'center',    },    logobtn: {     height: window.width/10,      width: window.width/10,      alignself:'center',    },    heartbtn: {     height: (92/97)*(window.width/13),      width: window.width/13,      alignself:'center',    },    category: {     fontfamily: 'bebas neue',      fontsize: 10,     fontweight: 'bold'   },    header: {     flex: 1,      justifycontent: 'space-around',      margintop: window.height/60,    },    footer: {     flex: 1,      flexdirection: 'row',      justifycontent: 'space-between',      alignitems: 'center',      margin: window.height/80,    },    container: {     flex: 1,      backgroundcolor: '#1a1a1a',    },    videopreview: {     flex: 2,      height: window.width*0.85,      width:window.width*0.98,      flexdirection: 'column'   },    previewtext: {     fontfamily: 'bebas neue',      fontsize: 23,     color: 'white',      textalign: 'left',      margintop: 2,      marginleft: 5,    },   });