Question

I may not be using the proper terminology but hopefully I get my question across properly. What I’m wondering is if it’s possible to “delay” the “creation” of a specific div, rather than just delay the FadeTo or Show jquery command.

I ask because I’m using the Vimeo API which is completely mind-boggling and frustrating (at least for me – it’s a source of endless shame and I wallow in self-pity when attempting any such Vimeo API coding). What I’m trying to do is just delay the autoplay of the iframe code for an embedded Vimeo video. The problem is that I have the div containing the vimeo iframe set to hide for a good three seconds after the page loads before it fades in, but since it’s just hidden the video starts playing anyway before the visitor can actually see it. I’m just using &autoplay=1 for the vimeo embed…

So, I suppose the only other solution besides getting this confusing Vimeo API to try to delay the video that way is to be able to just use a jQuery command to delay the vimeo iframe from even loading/being created on the page, until the container div fades in.

If this is possible I will bless my lucky charms. And double points if someone answers in the next few hours! Thanks so much!!!

Answer 1

I just editted my answer and applied it to fit your code you provided:

---

So what I did here is:
1) load jquery into your page
2)when jquery sees your div with id=”div” as ‘ready’, it will fire an alert that says loaded (you can remove this it was just for testing purposes), and then delay the src from loading in your iframe for 2 seconds (2000 miliseconds)
3) So you can change the 2000 to whatever time you want, and make sure the “player_1” matches your iframes id

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>
 $(document.getElementById('div')).ready(function() 
{
       alert('loaded');
    setTimeout('document.getElementById("player_1").src="http://www.youtube.com/v/82CYNj7noic?autoplay=1"', 2000);

 });

</script>

<div id="div" class="div">
<iframe class="iframe" id="player_1" >    </iframe>
</div>

​
​

Does this work for you?? I hope I’ve helped!!