一些HTML元素没有发挥好与响应布局。 其中之一是好醇’ iframe ，你可能需要嵌入外部来源，例如YouTube内容时使用。
在这篇文章中，我们将向您展示如何使用CSS来使嵌入内容响应，使内容，如视频和日历调整与浏览器的视口。 对于那些场合非编码将会在您的济南网站建设中嵌入视频，你不想依靠他们增加额外的标记， 我们也将研究使用而不是CSS JavaScript的一个解决方案 。
（你可以看到这些技术的演示在我的博客。）
该标记嵌入内容
服务，例如YouTube提供，您可以复制并粘贴到自己的网站中嵌入内容的代码。 我倾向于推荐给我的客户，他们的主机与YouTube视频，因为这将节省他们的服务器空间，无论用户的浏览器或设备，YouTube将正确地显示视频。 两个主要的方法来嵌入在网站的视频是HTML5 video元素，它不会在Internet Explorer旧版本的工作，和Flash，这并不在iOS设备上工作，是不是符合标准的。
当您嵌入来自外部源的内容，该代码将包括一个iframe ：
<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
这个iframe ，均可以在您的网站上显示外部内容，因为它包含一个指向流媒体内容的来源网址。
但是，你会发现，我们iframe包含width和height属性。 除去这些，并在iframe会消失，因为它不会有尺寸。 而且你也不可以解决这个问题在你的样式表，很遗憾。
的width属性意味着，一个屏幕比560像素窄上， 嵌入的内容将突出其包含的元素之外 ，打破了布局。 在下面的例子中，我在上面添加到我的博客页面中的代码。 该截图是取自在肖像模式下一个iPhone（宽320像素），以及页面的其余部分已经缩水，使嵌入的内容适合屏幕。 很不理想！
幸运的是，这个使用CSS周围的方式。 首先，我将向您展示如何使用嵌入式视频做到这一点，然后用日历。
响应视频
该标记
为了使嵌入内容敏感，你需要添加一个含包装周围的iframe 。 您的标记将如下所示：
<div> <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"> </iframe> </div>
接下来的步骤是添加的造型与这个新的包装和iframe在其内。
CSS的
首先，我们的样式含包装用.video-container类。 所建议的蒂埃里Koblentz在他的ALA的文章“创建内在指标对于视频” ，我们可以使用下面的代码片断在我们的样式表：
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
这个做了几件事情：
- 的设置
position，以relative允许我们使用绝对定位的iframe本身，我们将在短期内。 - 的
padding-bottom值计算出视频的纵横比。 在这种情况下，宽高比为16:9，表示高度将是宽的56.25％。 对于具有4:3宽高比的视频中，我们设置padding-bottom至75％。 - 该
padding-top值设置为30像素，以便铬的空间-这是特定的YouTube视频。 - 的
height被设定为0，因为padding-bottom给人的元素，它需要的高度。 我们不设置宽度，因为它会自动包含这个分区的反应元件调整。 - 设置
overflow来hidden，确保这个项目的突出之外的任何内容将被隐藏起来。
我们还需要样式化的iframe本身添加以下到你的样式表：
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
这个目标iframe的内线容器用.video-container类。 让我们的工作，通过代码：
- 绝对定位，是因为包含的元素有一个高度
0。 如果iframe的正常进行定位，我们将给予它的高度0为好。 - 在
top和left的属性中包含元素正确定位的iframe中。 - 的
width和height的属性，确保视频占用所用的容器元素（这实际上是设置填充）空间的100％。
这样做之后，视频现在将调整与屏幕的宽度。 下面是它的外观在桌面上：
而这里的它会如何看一个屏幕，320像素宽于：
让我们进入到嵌入的内容其他来源 – 特别是，谷歌日历。
响应日历
该标记
该CSS来制作任何形式的嵌入式内容响应本质上是相同的，但不同的内容会有不同的纵横比，这意味着你将需要设置padding-bottom相应的值。
下面是我管理的一所小学，一个网站， 嵌入了谷歌日历网站的屏幕截图。 正如你所看到的，在日历打破在小屏幕上的布局。 在这种情况下，被显示在正确的宽度的网站，但在日历超出屏幕的宽度。
的标记嵌入日历如下：
<iframe src="https://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
要制作日历响应，添加一个div与类的.calendar-container包含iframe的：
<div> <iframe src="https://www.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23FFFFFF&src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&color=%232952A3&ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"> </iframe> </div>
接下来的步骤是这个样式的div。
CSS的
的CSS日历几乎是相同的CSS，一个视频，但有两个例外：宽高比会有所不同，并且padding-top是没有必要的。
以下内容添加到你的样式表：
.calendar-container { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; }
在这种情况下， iframe是800像素宽，600像素高，这给我们的宽高比为4:3。 所以，设置padding-bottom为75%
这样做之后，我们需要将相同的造型适用于这个新容器中的iframe元素：
.calendar-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
这正是我们应用到视频相同的造型。
现在，日历将与浏览器窗口调整大小，如下所示在Opera移动对Android手机：
只要你记得来包装你的嵌入式日历和视频与含有适当的元素，那么这个CSS将适用于任何新的视频和日历添加到您的网站上。
但问题是，虽然可以容纳一个页面上的整个日历，它仍然是几乎无法使用，因为点击的目标是如此之小 ，没有信息是可见的。 如果你绝对要显示谷歌日历，你可以，但如果你可以像使用简单的CSS更实用的响应日历解决方案（设定display: block上表中的行，例如），或w3widgets响应日历或Calendario为自己的日历，你用户可能会欣赏它。
响应视频使用CSS或JavaScript
如果您正在开发使用内容管理系统中的敏感网站，然后其中一个网站的编辑或更多可能要嵌入的视频在一些点。 你可以指向你的编辑器来产生响应的<embed>代码中嵌入丰富的第三方媒体与点击，与单独的CSS。 或者，您也可以使用JavaScript的解决方案，从不必添加额外的CSS和标记舒缓神经的编辑。 但是，只要你能避免这条道路，就更好了，当然。
直到最近，大多数解决方案都是插件，这是确定的程度，但可以有性能问题。 一个流行的插件是FitVids.js ，由Chris Coyier和Paravel发展。
较新的解决方案是只使用一个脚本-如FluidVids.js ，由托德·座右铭开发。 FluidVids.js是使用简单 ：
- 下载脚本从GitHub上（邮政编码），并把它上传到你的服务器使用相同的文件夹结构，将下载的文件进来，这将会把脚本本身在一个命名的文件夹
dist。 - 调用脚本在每个页面的
<head>用下面的代码段：
<script src="dist/fluidvids.js></script>
这就是所有你需要做的，使视频调整在所有支持JavaScript的设备。 它不仅适用于YouTube上，但或是Vimeo，太。 但问题是，如果你的用户没有JavaScript支持或JavaScript的还没有加载或JavaScript没有正确加载，可以使用唯一的回退是下面的添加到您的样式表：
iframe { max-width: 100%; }
这将确保视频重新调整浏览器窗口的宽度。 但不会调整视频的身高，不幸的是， iframe是行不通的这种方式。 因此，视频不会破坏你的布局，但它不会很好看无论是。 这是不是一个真正的好的选择，所以如果你能避免使用JavaScript的视频，这是一个好主意，这样做 。
回应谷歌地图
除了视频和日历，另一个常见的问题是谷歌地图的嵌入，响应。 基本上，我们再次使用相同的内在比技术，当设置padding-bottom的包装，我们只是除以高度除以宽度并添加长宽比在CSS中。
通常情况下，通过谷歌地图生成的代码是这样的：
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe>
我们只是换一个div周围iframe和运用熟悉CSS样式给它：
.google-maps { position: relative; padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%) height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
这就是标记的样子：
<div> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="500" height="450" frameborder="0" style="border:0"></iframe> </div>
瞧！ 同样，我们可以只使用EmbedResponsively生成复制粘贴代码与点击。
总结
嵌入内容有破响应布局的习惯，因为它包含在一个iframe有一个固定的宽度。 在这篇文章中，我们已经看到了如何添加一个含包装，和一些CSS，以确保包含在所有的嵌入式内容iframe调整大小的浏览器窗口。
有时是不够好，但有时你可能需要拿出更多的先进的解决方案，因为调整大小并不总是一个解决方案。 我们也看了embed代码生成器和可选择的解决方案，使用JavaScript，这可能有必要在某些情况下，特别是如果编辑要处理许多影片，不具备所需的技术技能，或者CMS不允许内嵌造型。
你如何嵌入您的网站响应第三方内容？ 你发现任何特别的技巧或技术？ 什么是您的工作流程中嵌入这些内容是什么样子？
近期评论