自适应设计：创建流畅的YouTube和Vimeo内容

The approach most web developers take to make images responsive cannot be employed for videos from YouTube or Vimeo, as they deliver their content using embedded iframe elements. The generic code suggested to embed a YouTube video is as follows:

大多数Web开发人员采取的使图像具有响应性的方法不能用于YouTube或Vimeo的视频，因为它们使用嵌入式iframe元素传递内容。 建议嵌入YouTube视频的通用代码如下：

<iframe width="560" height="315" 
src="http://youtube.com/embed/m4cgLL8JaVI?rel=0" frameborder="0" 
allowfullscreen></iframe>

There are two primary ways to make embedded videos responsive. Before introducing the methods, we’ll strip off the redundant attributes:

有两种主要方法可以使嵌入式视频具有响应能力。 在介绍这些方法之前，我们将去除多余的属性：

<iframe src="http://www.youtube.com/embed/m4cgLL8JaVI?rel=0" allowfullscreen></iframe>

The first technique to make embedded video fluid is almost pure CSS. It only requires wrapping a div with a class around the iframe element:

使嵌入式视频流畅的第一种技术几乎是纯CSS 。 它只需要在iframe元素周围包装一个带有类 的div ：

<div class="responsive-container">
	<iframe src="http://youtube.com/embed/m4cgLL8JaVI?rel=0" allowfullscreen>
	</iframe>
</div>

Then applying CSS to the class and the iframe inside:

然后将CSS应用于class和其中的iframe ：

.responsive-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.responsive-container iframe {
	position: absolute;
	top: 0; 
	left: 0;
	border: 0;
	width: 100%;
	height: 100%;
}

The technique uses the standard approach of placing an absolutely positioned element inside a relative one, with an offset.

该技术使用将绝对定位的元素放置在相对的元素内(带有偏移量)的标准方法。

The second method still uses a div container but creates fluidity with JQuery, in the form of a plugin called FitVids, developed by Chris Coiyer, Dave Rupert, and others:

第二种方法仍然使用div容器，但是通过Chris Coiyer，Dave Rupert和其他人开发的名为FitVids插件的形式使用JQuery创建了流畅性：

$(document).ready(function(){
	$("#thing-with-videos").fitVids();
});

In the case of the code above, a <div> container with an id of thing-with-videos will be dynamically resized.

在上面的代码中， 带有视频内容的id的<div>容器将被动态调整大小。

Note that either technique can be also used to make embedded maps responsive. However, both techniques have the same drawback: maps from Google or Bing will not center or zoom in and out as their containers expand and contract. That takes a different solution, which I will cover in the very near future.

注意，这两种技术都可以用来使嵌入式地图响应。 但是，这两种技术都有相同的缺点：Google或Bing的地图不会随着其容器的扩展和收缩而居中或放大或缩小。 那需要一个不同的解决方案，我将在不久的将来介绍。

更多资源 (Further Resources)

The Embed Responsively service can auto-generate HTML and CSS code for YouTube, Vimeo, Dailymotion and more, given a URL.

有了网址， Embed Responsively服务可以自动为YouTube，Vimeo，Dailymotion等生成HTML和CSS代码。

翻译自: https://thenewcode.com/649/Responsive-Design-Create-Fluid-YouTube-and-Vimeo-Content