How to apply jquery function to a dynamically created element?

Question

I'm using FitVids.js to dynamically resize my videos. I also have a little script to make it so I can click an image and the image is replace with a YouTube video. However these videos aren't getting the fitvids script applied to them.

Here is the video and replacement script

<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>

This is the script I need applied to the element when it is created

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

I think you are running into the same issue as is addressed here: http://stackoverflow.com/questions/6118778/jquery-replacewith-find-new-element, probably a duplicate question — Jim Edelstein, Feb 22 '16 at 15:15

Kevin Kulla · Answer 1 · 2016-02-22T17:35:18.257

You can use padding to make an iframe maintain a proper ratio.

Here's a guide from CSS-Tricks on how to do it. You can scroll down to " Video (YouTube, Vimeo, etc.)" section.

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

EDIT: Okay, I've done some research and what your issue is is that you're supposed to call the fitVids() on a container of the video, not on the video that you've created.

<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>

This should fix your problem. You can use it on a more specific container if you need to.

How to apply jquery function to a dynamically created element?

1 Answers1