JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.4/dijit/themes/claro/claro.css">
<div data-dojo-attach-point="containerNode">
<div>Recreate steps:
<ol>
<li>1. Start playing the video in the first tab. </li>
<li>2. While the video is playing, switch over to view the second tab.</li>
<li>3. Note video stops playing upon switching to tab 2 (hiding of the div containing the flash plugin).</li>
</ol>
<br/>
This was fixed with <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=90268">mozilla bug 90268</a>, but seems to have regressed in FF 22 (even FF 21 worked).
<br/>
<br/>
</div>
<div data-dojo-type="dijit.layout.TabContainer" useSlider="false" useMenu="false">
<div data-dojo-type="dijit.layout.ContentPane" title="Tab 1" data-dojo-attach-point="tabA" selected="true">
<div data-dojo-attach-point="externalContent">
<iframe width="640" height="360" src="http://www.youtube.com/embed/8_lfxPI5ObM?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" title="Tab 2" data-dojo-attach-point="tabB">
<div data-dojo-attach-point="otherContent">Lorem ipsum and such</div>
</div>
</div>
</div>
CSS
.dijitHidden {
height:0!important;
width:0!important;
border:none!important;
visibility:hidden!important;
padding:0p!important;
position:absolute;
left:-9000px;
}
JavaScript
require([
"dojo/ready",
"dojo/parser",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane"
], function(ready, parser) {
ready(function(){
parser.parse();
});
});