Question

我使用FitVids.js动态调整视频大小。我也有一个小脚本，所以我可以点击图像，图像被YouTube视频取代。但是这些视频并没有将fitvids脚本应用于它们。

以下是视频和替换脚本

<img id="homevideo" src="image.jpg" 
data-video="http://www.youtube.com/embed/[URL-key]?autoplay=1">

<script>
jQuery(document).on('click','#homevideo',function(e){
    var video = '<iframe id="feature_video" src="'+jQuery(this).attr('data-video') +'" width="400" height="300"></iframe>';
    jQuery(this).replaceWith(video);
});
</script>

这是我在创建元素时需要应用的脚本

jQuery("#feature_video").fitVids();

Answer 1

您可以使用填充来使iframe保持适当的比例。

这是CSS-Tricks关于如何操作的指南。你可以向下滚动到＆＃34;视频（YouTube，Vimeo等）＆＃34;部分。

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

编辑：好的，我做了一些研究，你的问题是，你应该在视频的容器上调用fitVids()，而不是在你创建的视频上。

<script>
jQuery(document).on('click','#homevideo',function(e){
 var video = '<iframe id="feature_video" src="'+jQuery(this).attr('data-video') +'" width="400" height="300"></iframe>';
 jQuery(this).replaceWith(video);
 jQuery('body').fitVids();
});
</script>

这应该可以解决您的问题。如果需要，您可以在更具体的容器上使用它。

如何将jquery函数应用于动态创建的元素？

1 个答案: