<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-sm-4 col-sm-offset-4 video-container"> <h3 class="video-mobile-headline">Watch the Preview</h3> <div class="vid"> <!--<img class="responsive placard" src="" alt=""/>--> <iframe width="640" height="360" src="http://www.youtube.com/embed/YE7VzlLtp-4?rel=0" frameborder="0" allowfullscreen=""></iframe> </div><!--End vid--> </div>

.video-container{background:#ccc;padding:15px 15px 0px 15px;} .vid {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 25px;} .vid iframe, .vid object,.vid embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .video-mobile-headline{display: none; margin:0px;} /*Mobile Rendering. Add to the very end of your CSS file.*/ @media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { .video-container{padding-bottom:10px;} .flex-video { padding-top: 0;} } @media (max-width: 767px){ .video-mobile-headline{display: block;} }