我正在使用api来使我对此代码做出响应
<p> <iframe width="1165" height="655" src="https://www.youtube.com/embed/sJUCMmYsN1A?feature=oembed" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
我正在使用WebView在React Native App中显示此内容,但是iframe视频高度宽度太长。
任何建议?
<View style={{width: width, flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}} >
<Text style={{fontSize: 18}}>Description here</Text>
{/* <HTML
html={product.description}
imagesMaxWidth={Dimensions.get('window').width}
staticContentMaxWidth={200}
/> */}
<WebView
source={{html: product.description}}
bounces={false} // IOS Only
dataDetectorTypes='link'
scalesPageToFit={true}
scrollEnabled={false}
automaticallyAdjustContentInsets={false}
mediaPlaybackRequiresUserAction={true}
style={{marginRight: 10, marginLeft: 10, marginRight:10, width: width, height: 1000}}
/>
</View>
答案 0 :(得分:1)
有很多方法可以解决这个问题
这里有个简单的例子:在您的html之前添加一个最大宽度:100%的样式字符串,如下所示:
render() {
//write a css that enforces max-width: 100% on iframe
const htmlStyleFix = `<style type="text/css">iframe{max-width: 100%;}</style>`;
// add it just before the html you're getting from your API
// this could be htmlStr= htmlStyleFix + product.description
const htmlStr = `${htmlStyleFix}<p><iframe width="1165" height="655" src="https://www.youtube.com/embed/sJUCMmYsN1A?feature=oembed" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>`;
return (
<WebView
source={{html: htmlStr}} // use the custom html string you created above
bounces={false} // IOS Only
dataDetectorTypes='link'
scalesPageToFit={true}
scrollEnabled={false}
automaticallyAdjustContentInsets={false}
mediaPlaybackRequiresUserAction={true}
style={{marginRight: 10, marginLeft: 10, height: 1000}}
/>
);
}