Nightmare with Jquery, DOM Created Element, and HTML5

JavaScript
1

Alright, here is the page that’s my issue:

http://www.traileraddict.com/test-again.php

This page works perfectly on PC Firefox, PC Chrome, PC IE… but hits some hiccups on Mac Firefox.

Here is the issue. You open the page and the player begins loading the first video source. Now, there is an HD button on the lower right corner that, when clicked, resets the player and starts play() again. However, that HD button works great on the first browsers I listed, but returns a “videoPlayerid is null” alert on Mac Firefox. I can’t figure out why.

the code


//within a document.ready()
setTimeout(function() {
					var videoPlayerid = document.getElementById('trailer_addict_video_frame_html5_api');
//element #face3-video-quality is the HD button
					$('div#face3-video-quality, #cmenu-HD').click(function(){
						if(backforth % 2 === 0) {
							videoPlayerid.pause();
							videoPlayerid.src = primaryVideo;
							videoPlayerid.play();
						} else {
							videoPlayerid.pause();
							videoPlayerid.src = secondaryVideo;
							videoPlayerid.play();
						}
						backforth++;
					});
					}, 1000);

Now, the element ‘trailer_addict_video_frame_html5_api’ does not get created until document.ready() through another function. here’s what it looks like


<video id="trailer_addict_video_frame_html5_api" class="vjs-tech" src="http://www.domain.com/file.mp4" data-setup="{ "plugins": { "watermark": { "file": "/img/logo_ta.png", "xpos": "50", "xpos": "50" } } }" poster="/thumb-video.php?d=magnolia-pictures&f=last_days_on_mars" preload="auto">

    <source id="usource" type="video/mp4" src="http://www.domain.com/file.mp4"></source>

</video>

So trailer_addict_video_frame_html5_api is DOM created after page load. I’m assuming why this is the case that one particular browser, Firefox on an apple, can’t find it. But why? What is the trick to get it to acknowledge the existence of the new element? Am i better off trying to request the class instead of id for Apple Firefox?

I’ve been testing all sort of code for about 8 hours today and I can’t get one to work for Apple Firefox.

All help appreciated. (I was thinking the answer lied somewhere with .on(), but can’t figure out how to implement)

Cheers!
Ryan