YouTube视频放在侧边栏上

时间：2015-10-16 作者：bobrock4

On a page 我嵌入了一段视频。在Ipad上，当你调整浏览器窗口的大小（看下面的截图）时，视频会出现在侧边栏上。

它应该考虑一些响应性问题。

你知道怎么解决吗？谢谢

2 个回复
最合适的回答,由SO网友:Robert hue 整理而成

是的，响应能力存在问题。

将视频添加到具有类的div中yt-video. 例如

<div class="yt-video">
  <iframe width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" src="https://www.youtube.com/embed/602q_GYXOWA?rel=0">
</div>
并将此CSS添加到style.css 文件

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;
}
它将使您的视频响应迅速。但请确保始终使用类在div元素中添加视频yt-video.

编辑这将是您的风格。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;
}

SO网友:Gareth Gillman

您只需在css中添加以下内容：

iframe {
 height:300px;
 max-width:100%;
}
将高度更改为所需高度。

标签： responsive   小码农  

相关推荐

mobile vs responsive sites

美国一家医疗诊所的网络公司告诉我，对他们来说，建立一个常规的WP网站和一个单独的WP移动网站比建立一个单一的WP响应网站更便宜。什么是更好的传统智慧。是否只对那些负担不起常规和移动站点的用户做出响应，或者它处理的设备是否比移动站点多？