jquery - Tabs with <script> removeClass & addClass -
i'm trying add videos inside tabs here example
<script data-config="//config.playwire.com/17003/videos/v2/3745040/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="480" data-width="853" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script>
my problem everytime change tab doesn't show video
with iframes videos working
here i've tried far:
jquery:
$('document').ready(function() { $("#sidebar").tabs({ event: "click", activate: function (event, ui) { console.log(ui); var _tab = ui.newtab; $('#sidebar li').removeclass('active'); $(_tab).addclass('active'); }, }); });
html:
<div id="sidebar"> <ul> <li><a href="#tabs-1">video1</a></li> <li><a href="#tabs-2">video2</a></li> <li><a href="#tabs-3">video3</a></li> </ul> <div id="tabs-1"> <script data-config="//config.playwire.com/17003/videos/v2/3714373/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="390" data-width="630" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script> </div> <div id="tabs-2"> <script data-config="//config.playwire.com/17003/videos/v2/3745793/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="390" data-width="630" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script> </div> <div id="tabs-3"> <script data-config="//config.playwire.com/17003/videos/v2/3745040/zeus.json" data-css="//cdn.playwire.com/bolt/js/zeus/skins/default.css" data-height="390" data-width="630" src="//cdn.playwire.com/bolt/js/zeus/embed.js" type="text/javascript"></script> </div> </div>
your other videos don't have height.
try this:
#tabs-2 div, #tabs-3 div { height: 390px !important; }
Comments
Post a Comment