如何使YouTube嵌入100％的宽度与反应

过去我使用了fitvids()库，但它不适用于React。何可以让我的视频100％的宽度在React？如何使YouTube嵌入100％的宽度与反应

2017-05-25 ocram

该项目没有星星，但听起来像你在找什么https://github.com/LeisureLink-FE/react-flexifit。否则，您可以将这篇文章中的想法应用到您的React代码中https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php – djfdev

您可以通过窗口事件手动跟踪页面的宽度和作为道具传递给youtube组件。 –

阅读这篇文章。我认为它可以帮助你在这种情况下不使用React。 https://alistapart.com/article/creating-intrinsic-ratios-for-video – Nick

我在'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); 
}

来源

2017-06-10 14:44:43

如何使YouTube嵌入100％的宽度与反应

回答

相关问题