Bootstrap - Carousel Jumbotron - Iframes with WebGL content - php

Question

This question is pretty specific, but I'll ask anyways.
First off, I know iframe's are probably not the best design but I don't know how else to solve my problem. Anyways, let me start of with some background information:
I have a page with some WebGL content on it (it just loads a .obj and .mtl model using Three.js, and adds some keyboard navigation for camera movement).
This page is structured so that it gets a variable using php's $_GET array, and then loads the model based on that variable (if the variable was "Bus" then it would load from obj/Bus/Bus.obj, and if the variable was "Shoe" then it would load from obj/Shoe/Shoe.obj).
The link to the page would be like "browser.php?name=Bus" or "browser.php?name=Shoe".
Now, I want to display several of these pages in a carousel of iframes. Because I am using Bootstrap, this task is trivial with the following code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<iframe src="browser.php?name=Bus" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
<div class="item">
<iframe src="browser.php?name=Shoe" height="500" width="500">
<div class="container">
<div class="carousel-caption">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
<br />
<br />
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
This works perfectly except for one issue, the carousel-caption and all of its content are not showing. I am not sure if this is because of the iframe, or of the WebGL content, because when I just had an image there, its content was showing.
WebGL Iframe Carousel:
Normal Image Carousel:
Finally, my question: How do I fix my code / organization / design so that I can display the WebGL content in a carousel?
Sorry if this is a duplicate, but I was unable to find any relating links on google.
Thanks for taking your time to read/possibly answer this question,
Bucco
[EDIT]:
I just realized that my question was horribly worded, and was not clear enough. My main issue is with the navigator arrows not showing up in the WebGL content carousel (see the images). How do I fix my design / code so that I can display the WebGL content in a carousel with the navigator arrows?

Answer 1

The only obvious thing I see is that the <iframe>s are missing their closing tags, which are actually required according to the W3C (http://www.w3.org/TR/html-markup/iframe.html#iframe-tags).
I assume the normal behavior of an <iframe> is kicking in, which means that any children of the <iframe> are only displayed if the src cannot be loaded. Or, stated another way: lacking the closing tag, it looks like your navigation elements are treated as "fallback" content rather than sibling elements.
In fact, loading your content into a jsFiddle seems to prove me out: http://jsfiddle.net/dRtvH/ - w/o closing tags, no carousel, but simply closing the <iframe>s makes the nav buttons show up.