Hide Div Inside of Tabs

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="main">
    <div class="slides">Slides division</div>
    
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">tab1</a></li>
            <li><a href="#tabs-2">tab2</a></li>
            <li><a href="#tabs-3">tab3</a></li>            
        </ul>
        <div id="tabs-1">
            <div class="inner_panel">
                <p>working</p>
<iframe width="531" height="270" src="http://www.youtube.com/embed/7_nyhwuEX2c?rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <div id="tabs-2">
             <div class="inner_panel">
                 <p>working</p>
<iframe width="531" height="270" src="http://www.youtube.com/embed/7_nyhwuEX2c?rel=0" frameborder="0" allowfullscreen></iframe>                 
            </div>
        </div>
        <div id="tabs-3">
             <div class="inner_panel">
                 <p>working</p>
<iframe width="531" height="270" src="http://www.youtube.com/embed/7_nyhwuEX2c?rel=0" frameborder="0" allowfullscreen></iframe>                 
            </div>
        </div>
    </div>
</div>

CSS

.inner_panel{height:350px;}

JavaScript

$(document).ready(function(){
    $('#tabs').tabs();
});