响应式宽度 YouTube 视频

YouTube 提供的嵌入视频代码现在是一个非常简单的 iframe。以下是一个示例

<iframe width="1280" height="750" src="//www.youtube.com/embed/fXm9EwzSjO4?rel=0&amp;hd=1" frameborder="0" allowfullscreen></iframe>

iFrames，包括上面 YouTube 代码示例，包含外部内容，无法从父页面真正测量。宽度和高度设置对于定义 iframe 的大小是必要的，因为内部内容不会帮助塑造它（就像图像一样）。但是，在元素上设置静态宽度和高度会给任何类型的流体/灵活设计带来问题。如果父区域的宽度缩小到比视频窄，视频将溢出，不会缩小以适应。

Web Designer Wall 最近发布了一篇文章，介绍如何处理响应式宽度视频。这个想法最初来自 Thierry Koblentz 他在他的网站上写过关于它，以及 A List Apart。

我喜欢那里提出的想法。它们是纯 CSS（耶！），巧妙且能很好地完成工作。但是，它们针对 YouTube 视频的解决方案有两个固有的缺点

1. 视频的纵横比是预定义的。巧妙的 padding-bottom: 56.25% 方法可以实现 16:9 的纵横比，这对于某些视频来说很好，但肯定不是全部。
2. 您必须使用额外的标记。每个视频都需要包装在另一个 HTML 元素中。我不会称其为非语义化，因为它可能是有意义的，比如使用 <figure> 或其他元素，但这确实需要更多工作。

如果您不关心这些问题中的任何一个，您可以随意使用它，这是一个更简洁的解决方案。如果这些问题确实很重要，我们需要使用一些 JavaScript。

使用 jQuery 实现

这个 JavaScript 解决方案的妙处在于，您只需将 YouTube 嵌入代码复制粘贴到您的页面上即可，无需考虑其他问题。您想要设置的任何纵横比都可以。并且无需额外的标记。

基本原理是

1. 找出并保存页面上所有视频的纵横比。
2. 当窗口大小调整时，确定内容区域的新宽度，并将所有视频调整为与其原始纵横比匹配的宽度。

以下是带有注释的完整脚本

// By Chris Coyier & tweaked by Mathias Bynens

$(function() {

	// Find all YouTube videos
	var $allVideos = $("iframe[src^='http://www.youtube.com']"),

	    // The element that is fluid width
	    $fluidEl = $("body");

	// Figure out and save aspect ratio for each video
	$allVideos.each(function() {

		$(this)
			.data('aspectRatio', this.height / this.width)
			
			// and remove the hard coded width/height
			.removeAttr('height')
			.removeAttr('width');

	});

	// When the window is resized
	// (You'll probably want to debounce this)
	$(window).resize(function() {

		var newWidth = $fluidEl.width();
		
		// Resize all videos according to their own aspect ratio
		$allVideos.each(function() {

			var $el = $(this);
			$el
				.width(newWidth)
				.height(newWidth * $el.data('aspectRatio'));

		});

	// Kick off one resize to fix all videos on page load
	}).resize();

});

**在您自己的网站上使用此脚本**，您唯一需要更改的是 $fluidEl = $("body"); 这行代码。您可以将选择器（“body”）更改为您页面上内容的响应式宽度父元素。也许是“#main-content”或其他内容，如果该元素是 <section id="main-content"></section>。

**关于 window.resize 的说明：**每当您看到在窗口大小调整事件上运行的函数时，您都应该在脑海中敲响警钟。浏览器触发此特定事件的频率不同。WebKit 在快速调整大小期间可能会触发它无数次，因此，如果您执行大量繁重的计算工作，您可能会看到一些负面的页面性能。 这是一个来自 Paul Irish 的关于“去抖动”调整大小以解决此问题的插件，我强烈推荐。

查看演示   下载文件

我将“旧版本”（在本文更新之前）也包含在下载文件中（它处理“旧”类型的 YouTube 嵌入（对象/嵌入元素）。