问如何扩展div以覆盖较小屏幕上的视频，并使下拉菜单响应？

EN

        <!-- Content-->
        <div class="col-sm-10 col-sm-push-2 content" id="movie">
            <div class="row" id="movieWrapper">
                <div class="col-sm-5 col-sm-offset-1" id="movie-col">
                    <div class="embed-responsive embed-responsive-4by3">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/uXALot_v3mQ"></iframe>
                    </div>
                </div>
                <div class="col-sm-5" id="movie-col">
                    <div class="embed-responsive embed-responsive-4by3">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/uXALot_v3mQ"></iframe>
                    </div>
                </div>
            </div>
        </div>


        <!-- sidebar area start -->
        <div class="col-sm-2 col-sm-pull-10 sidebar">
            <div class="text-xs-center text-sm-left ">          

                <ul class="nav nav-tabs nav-stacked" role="menu">   
                    <li><a href="index.html" class="btn-main">Home</a></li>
                    <li><a href="about.html">About </i></a></li>

                    <li class="dropdown">
                        <a data-toggle="dropdown">Dropdown</a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                            <li role="presentation"><a role="menuitem" href="angaria.html">Subitem 01</a></li>

                            <li role="presentation"><a  role="menuitem" href="fujimoto.html">Subitem 02</a></li>

                            <li role="presentation"><a role="menuitem" href="komatsu.html">Subitem 03</a></li>

                        </ul>
                    </li>
                    <li class="movie-button"><a href="movie.html">Movie</a></li>
                </ul>

            </div>
        </div>

    </div>
</div>