如何使用 React 让 YouTube 嵌入 100% 宽度

Question

我过去使用过 fitvids() 库，但它不适用于 React。我可以在 React 中将我的视频设为 100% 的宽度吗？

Answer 1

我将以下代码与“component-dom”一起使用，因为我想要比 jQuery 更轻的东西，但是您可以轻松调整 DOM 遍历以与 jQuery 一起使用。另外，我强迫一切都宽屏。仅供参考，我不记得我从哪里得到窗口调整大小的代码，讨厌不给予信任。

updateVideoDimensions() {
    var allVideos = dom("#post-content").find("iframe[src*='player.vimeo.com']," + 
        "iframe[src*='youtube.com']," + 
        "iframe[src*='youtube-nocookie.com']," + 
        "iframe[src*='kickstarter.com'][src*='video.html']," + 
        "object," + 
        "embed");

    allVideos.each(function() {
        let width = (this).parent()[0].offsetWidth;

        (this)
        .attr('height', (width * 720) / 1280)
        .attr('width', width);
    });
}

componentDidUpdate() {
    this.updateVideoDimensions();
}

componentDidMount() {
    window.addEventListener("resize", this.updateVideoDimensions);
}

componentWillUnmount() {
    window.removeEventListener("resize", this.updateVideoDimensions);
}