0

On a page I have embedded a video. On Ipad and also when you resize the browser window (look at the screenshot below), video goes over the sidebar.

It should regard some responsive issue.

Do you how to resolve it? Thanks

  • You did add HTML as I asked but did not added css code. That's why it's not working. – Robert hue Oct 16 '15 at 11:00
  • I have had some troubles in finding the right css file. Try now. Even if my Firefox gives to me (I have already purged the browser cache) an old version of style.css and some trouble in viewing the video, Chrome gives to my the right css. It seems more responsive than before but video is not responsive. – bobrock4 Oct 16 '15 at 13:05
  • I see you added css in /assets/css/style.css. That's the right file but why did you pasted codes from both answers? Remove that code you added and add the css I provided right after last closing } bracket. – Robert hue Oct 16 '15 at 13:38
  • Robert, many thanks thanks. I have removed the second code. I believed they were not in conflicts. Now there is any more overlayer with those elements. Very good result. It remains that YouTube video embedded goes out of mobile small devices as smartphones. It is not reformatted on little displays. This is the actual argument. – bobrock4 Oct 16 '15 at 17:15
  • That's because you pasted CSS code inside media query. It appears you didn't follow instruction completely. I said, you will need to add CSS after any closing bracket. Anyway, I have made an edit in my answer and posted complete CSS of your style.css file. You will need to delete everything in your style.css and paste the CSS from answer. It will work. – Robert hue Oct 16 '15 at 21:39
2

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;
}
| improve this answer | |
0

You just need to add the following to your css:

iframe {
 height:300px;
 max-width:100%;
}

Change the height to your desired height.

| improve this answer | |
  • And that will make this video responsive??? – Robert hue Oct 16 '15 at 10:10
  • yup, it gives it max-width so it doesn't go past the natural width – Gareth Gillman Oct 16 '15 at 10:14
  • May be my CSS knowledge is limited but this is not responsive. This will let iframe go full width but set height to 300px and will keep it 300px no matter what the browser width is. – Robert hue Oct 16 '15 at 10:21
  • an iframe has to have a set height, so what I do is set it and then change it based on the screen size using media queries... but this isn't the place for this question anyway :) – Gareth Gillman Oct 16 '15 at 10:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.