iFrame Border Showing in WebView React Native

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, 
  }, 

});