iFrame Border Showing in WebView React Native - css

Question

In attempts to dynamically add youtube videos to my React Native app, I chose to use a combination of WebView and iFrame since the current react-native-youtube component doesn't work for RN 16^. Ultimately, the solution does work, but the iframe border still shows and will not go away (even with css or frameborder = 0), nor can I change it's color with css. Any ideas? Here's my 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 like this:
And the input iframe html into the webview looks like 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 my 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,
},
});