我有一个带有youtube视频和一个按钮的iframe,我想在单击按钮时播放youtube视频
这是我的代码
<iframe width="560" height="315" src="https://www.youtube.com/embed/tu-bgIg-Luo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<button>Play</button>
谢谢
附言我正在使用react,所以我需要在react或HTML / CSS / JS中使用的解决方案(请不要使用jQuery)
最佳答案
您可以在YouTube网址的autoplay
中传递网址参数:
像这样
?autoplay=1
这是完整的代码:import React from "react";
import "./styles.css";
export default function App() {
const [play, setPlay] = React.useState(false);
const url = play
? `https://www.youtube.com/embed/tu-bgIg-Luo?autoplay=1`
: `https://www.youtube.com/embed/tu-bgIg-Luo`;
return (
<div className="App">
<iframe
width="560"
height="315"
src={url}
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<button onClick={() => setPlay(true)}>Play</button>
</div>
);
}
这是演示:https://codesandbox.io/s/serene-yonath-9z2hs?file=/src/App.js:0-556
关于javascript - YouTube嵌入了react控件,播放onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63667396/