Yes, there are issues with responsiveness.
Add your video in a div with class yt-video
. For example.
<div class="yt-video">
<iframe width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/602q_GYXOWA?rel=0">
</div>
And add this CSS in your style.css
file.
div.yt-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
div.yt-video iframe, div.yt-video object, div.yt-video embed{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
It will make your video responsive. But make sure you always add video inside a div element with class yt-video
.
EDIT
This will be your style.css
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'ProximaNova-Regular';
src: url('../font/proximanovaregular.eot');
src: url('../font/proximanovaregular.eot?#iefix') format('embedded-opentype'),
url('../font/proximanovaregular.woff') format('woff'),
url('../font/proximanovaregular.ttf') format('truetype'),
url('../font/proximanovaregular.svg#proximanovaregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ProximaNova-Bold';
src: url('../font/proximanovabold.eot');
src: url('../font/proximanovabold.eot?#iefix') format('embedded-opentype'),
url('../font/proximanovabold.woff') format('woff'),
url('../font/proximanovabold.ttf') format('truetype'),
url('../font/proximanovabold.svg#proximanovabold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ProximaNova-Semibold';
src: url('../font/proximanovasemibold.eot');
src: url('../font/proximanovasemibold.eot?#iefix') format('embedded-opentype'),
url('../font/proximanovasemibold.woff') format('woff'),
url('../font/proximanovasemibold.ttf') format('truetype'),
url('../font/proximanovasemibold.svg#proximanovasemibold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MyriadPro-Regular';
src: url('../font/myriadproregular.eot');
src: url('../font/myriadproregular.eot?#iefix') format('embedded-opentype'),
url('../font/myriadproregular.woff') format('woff'),
url('../font/myriadproregular.ttf') format('truetype'),
url('../font/myriadproregular.svg#myriadproregular') format('svg');
font-weight: normal;
font-style: normal;
}
.header{
margin:0 -20px;
padding:15px 20px 0;
border-top:5px solid #a2dbd8;
background-color: #355f7d;
*background-color: #355f7d;
background-image: -moz-linear-gradient(top, #428999, #355f7d);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#428999), to(#355f7d));
background-image: -webkit-linear-gradient(top, #ffffff, #355f7d);
background-image: -o-linear-gradient(top, #428999, #355f7d);
background-image: linear-gradient(to bottom, #428999, #355f7d);
background-repeat: repeat-x;
}
.logo{ color:#fff;}
.logo h2{font-family:'ProximaNova-Bold'; font-size:26px; font-weight:normal; margin:0; padding:10px 0 0 0; line-height:28px;}
.logo h5{font-family:'ProximaNova-Regular'; font-size:16px; font-weight:normal; margin:0; padding:0; line-height:16px;}
.logo a{ color:#fff; text-decoration:none;}
.logo a:hover{ color:#fff; text-decoration:none;}
.phn{ color:#fff; font-size:16px; padding:23px 0 0 0;}
.phn i{ margin:0 4px;}
.phn span{font-family:'ProximaNova-Bold'; font-size:21px;}
.navigation{ margin:0; padding:0;
background-color: #d3e1f1;
*background-color: #d3e1f1;
background-image: -moz-linear-gradient(top, #ffffff, #d3e1f1);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#d3e1f1));
background-image: -webkit-linear-gradient(top, #ffffff, #d3e1f1);
background-image: -o-linear-gradient(top, #ffffff, #d3e1f1);
background-image: linear-gradient(to bottom, #ffffff, #d3e1f1);
background-repeat: repeat-x;
border:1px solid #fff;
margin:15px 0 0 0;
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius:6px 6px 0 0;
border-radius:6px 6px 0 0;
}
.body-container{ margin:0 -20px; padding:0 20px; background:url(../img/background.jpg) no-repeat top center;}
.banner{ margin:0; padding:0; border-bottom:5px solid #ccc; background:#38617f;}
.banner .carousel-caption{ padding-bottom:30px; padding-right:15px; padding-left:0}
.banner .carousel-caption h4{ color:#80dbe0; font-size:24px; font-weight:normal; font-family:'ProximaNova-Bold';}
.banner .carousel-caption h2{ color:#fff; font-size:40px; font-weight:normal; font-family:'ProximaNova-Bold';}
.body-wrap{ margin:0; padding:15px;
background-color: #f4f4f4;
*background-color: #f4f4f4;
background-image: -moz-linear-gradient(top, #ffffff, #f4f4f4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f4f4f4));
background-image: -webkit-linear-gradient(top, #ffffff, #f4f4f4);
background-image: -o-linear-gradient(top, #ffffff, #f4f4f4);
background-image: linear-gradient(to bottom, #ffffff, #f4f4f4);
background-repeat: repeat-x;
}
.block{}
.block h5{ color:#355f7d; font-size:16px; font-weight:normal; font-family:'ProximaNova-Bold';}
.block h4{ color:#355f7d; font-size:21px; font-weight:normal; font-family:'ProximaNova-Bold';}
.block ul{ margin:0; padding:0 0 0 15px;}
.block ul li{ margin:0; padding:0; list-style:disc;}
.right-col{ margin-top:40px;}
.right-col-inner{}
.right-col-inner h4.maptitle{ color:#0270c4; font-size:16px; font-weight:normal; font-family:'ProximaNova-Bold'; margin-top:20px;}
.contentmanage h2{ margin:0; padding:0; font-weight:normal; font-family:'ProximaNova-Bold'; color:#38617f; font-size:23px;}
.contentmanage h4{ margin:0; padding:0; font-weight:normal; font-family:'ProximaNova-Bold'; color:#38617f; font-size:19px;}
.contentmanage p span{ font-family:'ProximaNova-Bold'; color:#38617f;}
.contentmanage p{ margin:0; padding:15px 0 0 0;}
.contentmanage ul.list-text{ margin:0; padding:15px 0 0 20px; font-family:'ProximaNova-Bold'; color:#38617f; font-size:16px;}
.contentmanage ul{ margin:0; padding:15px 0 0 20px;}
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin:10px 0 0 0;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.innertop-box{ margin:0 0 20px 0; padding:0;}
.innertop-box .img{ -webkit-border-radius:10px 10px 0 0;
-moz-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;}
.innertop-box .info{ margin:0; padding:15px; color:#fff;
background-color: #71bcbf;
*background-color: #71bcbf;
background-image: -moz-linear-gradient(top, #90d2d2, #71bcbf);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#71bcbf));
background-image: -webkit-linear-gradient(top, #90d2d2, #71bcbf);
background-image: -o-linear-gradient(top, #90d2d2, #71bcbf);
background-image: linear-gradient(to bottom, #90d2d2, #71bcbf);
background-repeat: repeat-x;
-webkit-border-radius:0 0 10px 10px;
-moz-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;}
.innertop-box .info h3{ margin:0; padding:0; font-size:21px; line-height:30px; font-family:'ProximaNova-Bold'; font-weight:normal;}
.timetable{ margin:0; padding:0; background:url(../img/pattern.jpg); -webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;}
.timeblock{ margin:0; padding:15px; background:url(../img/watchbg.png) no-repeat right top; font-family:'ProximaNova-Bold'; text-transform:uppercase; text-shadow:1px 1px 1px #000; color:#fff; font-size:19px; -webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;}
.quoteform{ margin:20px 0; padding:15px; background:#a5e5ef; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
.quoteform h3{ margin:0; padding:0 0 5px 0; font-weight:normal; font-family:'ProximaNova-Regular'; line-height:26px; font-size:21px; color:#3d5b65;}
.quoteform input[type=text]{ color:#43636d;}
.quoteform input[type=submit]{ margin:5px 0 0 0;}
.quoteform form{ margin:0; padding:0;}
.quoteform label.checkbox{ font-size:11px; co#43636d; line-height:15px;}
div.fb-like-box,
div.fb-like-box > span,
div.fb-like-box > span > iframe[style],
div.fb-comments,
div.fb-comments > span,
div.fb-comments > span > iframe[style] {width: 100% !important;}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.sub-con {
background: #ececec none repeat scroll 0 0 !important;
height: 250px !important;
margin: 0 12px 0 0 !important;
padding-top: 10px !important;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.span3 {
margin: 0 8px 0 0 !important;
}
}
div.yt-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
div.yt-video iframe, div.yt-video object, div.yt-video embed{
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}