Untitled

<body><div class="main-container"><section class="image-square left">
                <div class="col-md-6 image">
                        <iframe id='video' src="https://www.youtube.com/embed/uV-54LlSbcw" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="col-md-6 col-md-offset-1 content">
                        <ul><li>
     <div class="">
                         <img alt="image" class="background-image" src="[[+slide]]" />
     </div>
     <div class="minus200px">
                        <h1>[[+longtitle]]</h1>
                        <h6>[[+pagetitle]]</h6>
     </div>
</li><li>
     <div class="">
                         <img alt="image" class="background-image" src="[[+slide]]" />
     </div>
     <div class="minus200px">
                        <h1>[[+longtitle]]</h1>
                        <h6>[[+pagetitle]]</h6>
     </div>
</li>
                </div>
</section>
<style>
 .minus200px{ margin-top: -250px;}
 .minus200px h1, .minus200px h6 {color: white !important; }
 .image {margin-top: 10px;}
 #video{ height:410px; width:610px; }
 @media screen and (max-width: 980px) {
      #video{ height:400px; width:900px; }
 }
 @media screen and (max-width: 900px) {
      #video{ height:280px; width:840px; }
 }
 @media screen and (max-width: 800px) {
      #video{ height:280px; width:720px; }
 }
 @media screen and (max-width: 768px) {
      #video{ height:280px; width:700px; }
 }
 @media screen and (max-width: 480px) {
      #video{ height:200px; width:430px; }
 }
 @media screen and (max-width: 400px) {
      #video{ height:200px; width:380px; }
 }
 @media screen and (max-width: 360px) {
      #video{ height:200px; width:330px; }
 }
 @media screen and (max-width: 320px) {
      #video{ height:200px; width:300px; }
 }
</style>
</div>
</body>