Youtube嵌入react控件，播放onclick

Question

我有一个带有 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>

谢谢

P.S。我正在使用反应，所以我需要反应或 HTML/CSS/JS 中的解决方案（请不要 jQuery）

Answer 1

你可以在 youtube autoplay 中传递 url 参数 url:

像这样

?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

Youtube嵌入react控件，播放onclick

Youtube embed in react controls, play onclick

html

javascript

youtube

reactjs