Untitled

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8" />
        <meta name="generator" content="emacs" />
        <title></title>

        <link rel="stylesheet"   href="css/owl.carousel.css" type="text/css" />
        <link rel="stylesheet"   href="css/owl.theme.default.css" type="text/css" />
        <link rel="stylesheet"   href="css/test5.css" type="text/css" />


        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
        <script type="text/javascript" src="js/owl.carousel.js"></script>
        <script type="text/javascript" src="js/test.js"></script>

    </head>
    <body>
        <div class="page-wrap">
            <header id="page-header">
                <h2>testing owl carousel and youtube iframe API</h2>
            </header>


            <main>
                <div class="youtube-slider-container">
                    <div class="owl-carousel">

                        <div class="owl-slide">
                            <div class="video-wrapper">
                                <div id="player_1">

				</div>
                            </div>
                        </div>

                        <div class="owl-slide">
                            <div class="video-wrapper">
                                <div id="player_2">

				</div>
                            </div>
                        </div>

                    </div>
                </div>
            </main>

            <script>
             $(document).ready(function(){
                 $(".owl-carousel").owlCarousel(
                     {
                         items: 1,
                         loop: true,
                         itemSelector : 'owl-slide'
                     }
                 );
             });

            </script>

        </div>  <!-- ENDS .page-wrap -->
    </body>
</html>